@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 160px;
}
html {font-size: 62.5%;scroll-behavior: smooth;}
body{  
  font-size: 1.6rem;
}
object {pointer-events: none;}
.sp {display: none !important;}
a[href^="tel:"] {pointer-events: none;}
a {
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.pcFlex{display: flex;}
.pcFlex.half{
 justify-content: space-between;
}
.pcFlex.half >*{
 width: 48%;
}
.txtImgBox{
 justify-content: space-between;
 align-items: flex-start;
}
.txtImgBox .txts{
 width: 56%;
}
.txtImgBox figure{
 width: 39%;
}
.img_r {overflow: hidden;}
.img_r>img {float: right;
    width: 33%;
    margin-left: 15px;
    margin-bottom: 15px;
}
p,li,dt,dd,th,td,input{
  font-size: 1.6rem;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 1.6rem;
}

section{
  padding: 100px 0;
}
section p:not(:last-child){
  margin-bottom: 1.5em;
}


/*タイトル
========================================== */
.h2Tit{
 font-size: 4rem;
 margin-bottom: 40px;
}
.h2Tit .icRectangle{
	font-size: 2rem;
}

.h3Tit {
  font-size: 3.6rem;
	margin-bottom: 45px;
}
.h3Tit.fontAf,
.h3Tit .fontAf{
	font-size: 5rem;
}
.h4Tit {
	font-size: 2.6rem;
	margin-bottom: 20px;
}
.h5Tit {  
	font-size: 2.2rem;
	margin-bottom: 20px;
}
.h6Tit{
	font-size: 1.8em;
	margin-bottom: 20px;
}

/*
　テキスト
========================================== */
.leadTxt{
  font-size: min(1.85vw,1.8rem);
  text-align: center;
}
.note{
  font-size: 1.2rem;
}

/*
　ボタン
========================================== */
.btn{
 width: 268px;
 height: 48px;
 padding: 0 31px;
}

.btmBtn{
	gap:0 30px;
	padding-top: 100px;
	padding-bottom: 100px;
}


/* =======================================
  ページャー
========================================== */
/*-- pageNavi --*/
.pageNavi{
	gap:0 1.5%;
 margin-top: 80px;
}
.pageNavi .current,
.pageNavi .inactive,
.pageNavi a{
	font-size: 1.8rem;
	width: 40px;
	height: 40px;
}
/*-- pager --*/
.pager{
	margin-top: 50px;
}
.pager a{
font-size: 1.6rem;
  width: 200px;
}

/* =======================================
	header
========================================== */
header {
	padding: 19px 0;
	height: 142px;
}
#top header:not(.fixed){
 background: transparent;
}
header.fixed{
 background: var(--LGray);
}
header .inner1200{
 position: relative;
}
header .inner1200.pcFlex{
	gap: 0 10px;
}
header #logo img{
  width: 77px;
  height: autopx;
}
header #logo > span{
  font-size : min(1.2vw,1.4rem);
}

.headerLinks{
	display: flex;
	place-content: center;
	align-items: flex-end;
	position: absolute;
	right: 0;
	top: 0;
	gap: 0 16px;
}
.headerLinks li{
	border-radius: 24px;
	height: 48px;
}
.headerLinks li a{
 border-radius: 24px;
 font-size: 1.5rem;
 width: 100%;
 height: 100%;
 padding-left: 30px;
 padding-right: 30px;
}


/* =======================================
	gnavi
========================================== */
.gnavi{
 align-items: center;
 padding-top: 48px;
 flex: 1;
}

#gnaviList{
 flex: 1;
 height: 100%;
 justify-content: flex-end;
 align-items: center;
 gap: 0 30px;
}
#gnaviList > li{
 position: relative;
 font-size: 1.3rem;
}
#gnaviList > li >a{
 display:flex;
 align-items: center;
 height: 38px;
 font-size: min(1.3vw,1.3rem);
 white-space: nowrap;
}
#gnaviList li.current a,
#gnaviList li a:hover{
 opacity: .7;
}
#gnaviList li a:hover{
	text-decoration: underline;
}


/* =======================================
	main
========================================== */
main{
	margin-top: 142px;
}
#top main{
 margin-top: 0;
}


/* =======================================
	topBnr
========================================== */
#topBnr{
	padding: 80px 0;
}
#topBnr .pcFlex{
	justify-content: center;
	gap: 0 29px;
}
#topBnr li{
	max-width: 451px;
	height: 137px;
}
#topBnr li a:hover{
	opacity: .7;
}
#topBnr li img.logoStudio{
	width: min(71.85%,324px);
}
#topBnr li img.logoAshigaru{
	width: min(39.25%,177px);
}


/* =======================================
	footer
========================================== */
/*------------------------
      footerContent
------------------------*/
#footContact{
	padding-top: 65px;
	padding-bottom: 73px;
}
#footContact p{
	font-size: 2rem;
	margin-bottom: 40px;
}
#footContact .btn{
	border-radius: 46px;
	width: 326px;
	height: 91px;
}
#footContact .btn .txtS{
	font-size: 1.5rem;
}

footer a:hover{
	opacity: .7;
}
#footerLogo img{
 max-width: 127px;
}
.footerBox{
	padding-bottom: 45px;
}
.footerBox .footerLeft{
padding-right: 3%;
 width: 50%;
 margin-top: 70px;
}
.footerBox .address{
	font-size: min(1.65vw,1.6rem);
}
.footerBox .footerRight{
 flex:1 0 auto;
 max-width: 480px;
 width: 47%;
 margin-top: 100px;
}
.footerNavi:not(:last-of-type){
	margin-right: min(10.89%,49px);
}
.footerNavi > li{
	font-size: min(1.65vw,1.6rem);
	letter-spacing: 0;
 margin-bottom: 5px;
}

footer .copyright{
	margin-top: 125px;
}
footer .copyright copy{
 font-size: min(9.3vw,100px);
}

#pageTop{
	right: 4vw;
	bottom: 30px !important;
}
#pageTop img{
 max-width: 89px;
 max-height: 89px;
}


/* =======================================
	pgs common
========================================== */
/*-- mainTitle --*/
.mainTitle{
	height: 218px;
}
.mainTitle h2{
	font-size: 6.4rem;
}
.mainTitle h2 span{
	font-size: 1.6rem;
	margin-top: 32px;
}

/*-- table --*/
.basicTable >dt{
	border-right: 1px dotted var(--blue);
	padding: 15px 2.5%;
	width: 23%;
}
.basicTable >dd{
	padding: 15px 2.5%;
	width: 77%;
}
.basicTable >dt:last-of-type{
	border-bottom: none;
}
 .basicTable >dd:last-of-type{
	border-bottom: none;
}

table.basicTable thead th{
	font-size: 1.8rem;
}

/*		anchorLink
-----------------------------*/
.anchorLink{
	gap:15px 28px;
	justify-content: center;
	padding: 45px 0;
}
.pageLinks{
	padding: 35px 0 ;
	gap:15px 20px;
}
.anchorLink li,
.pageLinks li{
	/* width: calc((100% - 20px * 2) / 3); */
	width: calc((100% - 28px * 3) / 4);
	max-width: 200px;
	height: 56px;
	font-size: 1.5rem;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 10px;
}


/* =======================================
	top
========================================== */
#top section{
	padding: 60px 0;
}

/*		#mv
-----------------------------*/
#mv {
	padding-top: 142px;
}
.mvTxts{
	justify-content: space-between;
	align-items: center;
	padding: 26px 0 72px;
}
.mvTxts p{
	max-width: 335px;
}
.mvMovie,
.mvMovie iframe{
	height: 700px !important;
}

/*		#topReason
-----------------------------*/
#topReason .h2Tit{
	font-size: min(3.5vw,4rem);
}
#topReason .pcFlex{
	gap: 0 38px;
}
#topReason .pcFlex figure{
	max-width: 435px;
}
#topReason .pcFlex figcaption{
	font-size: min(3vw,3.2rem);
}
#topReason figcaption.icMovie{
	padding-left: 65px;
}
#topReason figcaption.icEvent{
	padding-left: 56px;
}
#topReason .pcFlex p{
	width: 100%;
	max-width: 56px;
}
#topReason .btnWrap{
	margin-top: 50px;
}

/*		#topService
-----------------------------*/
#topService .h2Tit{
	margin-bottom: 60px;
}
#topService ol{
	gap: 50px 60px;
}
#topService ol li{
	width: calc((100% - 120px) / 3);
}
#topService .num{
	font-size: 3.2rem;
	margin-top: 20px;
}
#topService .num span{
	font-size: 2rem;
	margin-right: 17px;
	width: 40px;
	height: 40px;
}
#topService .btn{
	margin-top: 58px;
}

/*		#topLinks
-----------------------------*/
#topLinks{
	padding: 76px 0;
}
#topLinks .pcFlex{
	flex-wrap: wrap;
}
#topLinks .pcFlex li{
	width: 50%;
}
#topLinks ul li span{
	background-size: 56.5px;
	font-size: 3.2rem;
	padding: 0 62px 10px 0;
}

/*		#topNews
-----------------------------*/
.articleList .date{
	font-size: 2.4rem;
}
.articleList .cat{
	font-size: 1.8rem;
	margin-left: 14px;
	padding: 9px 23px 10px;
}
.articleList dd{
	font-size: 2rem;
}
#topNews .btnWrap .btn{
	margin: 57px 0 0 auto;
}


/* =======================================
	company
========================================== */
#companyGreeting .box{
	margin-top: 90px;
	padding: 40px 40px 60px;
}
#companyGreeting .h4Tit{
	font-size: 3.6rem;
	margin-bottom: 50px;
}
#companyGreeting .h5Tit{
	font-size: 3.2rem;
	margin-bottom: 25px;
}
#companyGreeting .leadTxt{
	font-size: min(2.05vw,2rem);
	line-height: 1.75;
}
#companyPartner ul.pcFlex li{
	width: calc((100% - 2px) / 2);
}
#companyPartner ul.pcFlex li:not(:last-child){
	border-right: 1px solid var(--LGray);
}


/* =======================================
	esg
========================================== */
#esgInitiative .esgBox h4{
	margin-bottom: 30px;
}
#esgInitiative .esgBox .h5Tit{
	margin-bottom: 10px;
}
#esgInitiative .esgBox h4 .en{
	font-size: 5rem;
}
#esgInitiative .esgBox h4 .en span{
	font-size: 6.5rem;
	width: 80px;
	height: 80px;
}


/* =======================================
	reason
========================================== */
#reasonLead{
	margin-top: 108px;
	margin-bottom: 30px;
}
#reasonLead .leadTxt{
	font-size: 3.2rem;
	line-height: 1.6;
}
#reason .txts h4{
	font-size: 2rem;
	margin-bottom: 10px;
	padding: 7px 14px;
}
#reason .txts p{
	margin-bottom: 1.8em;
	padding: 0 1em;
}


/* =======================================
	service
========================================== */
#serviceLead{
	margin-top: 108px;
}
#serviceLead p{
	font-size: 2rem;
}
#serviceLead .leadTxt{
	font-size: 3.2rem;
	line-height: 1.6;
	margin-bottom: 40px;
}

#service01 .serviceBox01{
	align-items: center;
}
#service01 .serviceBox01 li{
	font-size: min(2.1vw,3.2rem);
	height: 142px;
	padding: 25px 3%;
	width: min(calc((100% - 120px)/2),540px);
}
#service01 .serviceBox01 li span{
	width: 181px;
}
#service01 .serviceBox01 li span:first-child{
	margin-right: 64px;
}
#service01 .serviceBox01 li span:first-child::before{
	width: 40px;
	height: 4px;
	right: -52px;
	top: calc(50% - 2px);
}
#service01 .serviceBox01 li span:first-child::after{
	width: 4px;
	height: 40px;
	right: -34px;
	top: calc(50% - 20px);
}
#service01 .serviceBox01 li:first-child span:first-child{
	margin-right: 95px;
}
#service01 .serviceBox01 li:first-child span:first-child::before{
	right: -60px;
}
#service01 .serviceBox01 li:first-child span:first-child::after{
	right: -42px;
}
#service01 .serviceBox01 li:first-child{
	margin-right: 120px;
}
#service01 .serviceBox01 li:first-child::before{
	width: 63px;
	height: 4px;
	right: -90px;
	top: calc(50% - 4px);
}
#service01 .serviceBox01 li:first-child::after{
	width: 4px;
	height: 63px;
	right: -59px;
	top: calc(50% - 33.5px);
}

#service01 .serviceBox02{
	margin-top: -71px;
	padding: 142px 10% 161px;
}
#service01 .serviceBox02 h3{
	font-size: 3.2rem;
	margin-bottom: 132px;
}
#service01 .serviceBox02 h3::after{
	width: 26px;
	height: 48px;
	bottom: -95px;
	left: calc(50% - 13px);
}
#service01 .serviceBox02 ul{
	margin: 0 auto;
	max-width: 1024px;
}
#service01 .serviceBox02 ul li{
	font-size: 2.4rem;
	padding-left: 34px;
}
#service01 .serviceBox02 ul li::before{
	width: 33px;
	height: 32px;
	top: 8px;
}
#service01 .serviceBox02 p{
	font-size: 2rem;
	bottom: -190px;
}
#service01 .serviceBox02 p span{
	font-size: min(2.36vw,3.6rem);
	margin-top: 18px;
	padding: 2px 60px 3px;
}

#serviceJob p{
	text-align: center;
}
#serviceJob .note{
	text-align: center;
}
#serviceJob figure.sp-slide img{
	margin-left: auto;
	margin-right: auto;
}

#service #business .serviceList{
	gap: 50px 10%;
}
#service #business .serviceList li{
	width: calc(80% / 3);
}
#service #business .serviceList li figcaption{
	font-size: 2.2rem;
}

#teamRed .h3Tit + p{
	text-align: center;
}
#teamRed .teamBox .h4Tit{
	font-size: 3.2rem;
	letter-spacing: 0.11em;
}
#teamRed .teamBox > ul{
	justify-content: center;
}
#teamRed .teamBox > ul > li{
	padding: 20px 2.75%;
	width: 300px;
	height: 300px;
}
#teamRed .teamBox > ul > li:not(:first-child){
	margin-left: -28px;
}
#teamRed .teamBox ul li img{
	height: 100px;
}
#teamRed .teamBox ul li h4{
	font-size: 4rem;
	width: 68.7%;
}
#teamRed .teamBox ul li h4 span{
	font-size: 6.4rem;
}
#teamRed .teamBox ul li h5{
	font-size: min(1.8vw,1.8rem);
	letter-spacing: 0.11em;
	margin-bottom: 15px;
	line-height: 1.6em;
}
#teamRed .teamBox ul li ul li{
	font-size: min(1.2vw,1.4rem);
	margin-bottom: 10px;
}

.faqList dt{
	padding: 0.5rem 4rem 0.6rem 4rem;
}
.faqList dd{
	padding: 0 4rem 30px 4rem;
}
.faqList dt::before{
	top: 0.5rem;
}
.faqList dt::after{
	right: 2rem;
}


/* =======================================
	creator
========================================== */
.creatorBox .txtImgBox{
	align-items: center;
	margin-bottom: 37px;
}
.creatorBox .txtImgBox .txts{
	width: 60.17%;
}
.creatorBox .txts p{
  padding-top: 20px;
}
.creatorBox .txtImgBox figure{
	width: 35.42%;
}
.creatorBox .h3Tit{
	font-size: 2rem;
	margin-bottom: 6px;
}
.creatorBox dl{
	margin-top: 45px;
}
.creatorBox dl::before{
	width: 90%;
	height: 80%;
}
.creatorBox dl dt{
	font-size: 2rem;
	line-height: 1;
	padding: 14px 28px;
}
.creatorBox dl dd .txts{
	margin-left: 24px;
	padding: 32px 30px 22px;
	width: min(70.35%,816px);
}
.creatorBox dl dd figure{
	width: min(25.35%,297px);
}


/* =======================================
	 works
========================================== */
#worksLead .box{
	align-items: center;
	margin-top: 40px;
}
#worksLead .box .txts{
	margin: 1em 2%;
	width: 60%;
}
#worksLead .box figure{
	width: 38%;
}

#works table.basicTable thead th{
	font-size: 1.6rem;
	padding: 2px 2.5%;
}
#works table.basicTable tbody th,
#works table.basicTable tbody td{
	padding: 7px 1.25%;
}

#works ul.slider{
	margin-top: 40px;
}

.worklistWrap{
  margin-bottom: 50px;
}

/* =======================================
  partners
========================================== */
#partnersLead .txts{
	margin: 0 0 0 auto;
	padding: 3% 4%;
	width: 50%;
}
#partnersLead .h3Tit{
	font-size: min(2.9vw,3.6rem);
	margin-bottom: 0.75em;
}

#partners01 ul{
	flex-wrap: wrap;
	gap: 50px 5%;
}
#partners01 ul li{
	width: 30%;
}
#partners01 ul li h4{
	font-size: 2.2rem;
	padding: 10% 5%;
}
#partners01 ul li p{
	padding: 10% 5%;
}

.guideLineBox p{
	text-align: center;
}
.guideLineBox ul{
	gap: 20px 5%;
	flex-wrap: wrap;
	justify-content: center;
	margin: 3em 0;
}
.guideLineBox ul li{
	padding-left: 18px;
	width: 38%;
}
.guideLineBox ul li::before{
	width: 6px;
	height: 6px;
	top: calc(50% - 3px);
}


/* =======================================
	news
========================================== */
/*		一覧
-----------------------------*/
#newsListWrap{
	margin-top: 50px;
}
#newsListWrap.pcFlex{
		flex-direction: row-reverse;
		gap: 3%;
	}
#newsListWrap.pcFlex #newsSide{
	width: 180px;
	margin: 30px 0;
}
#newsSide ul + h3{
	margin-top: 40px;
}
#newsSide ul{
	margin: 5%;
}
#newsSide ul li{
	margin-bottom: 0.5em;
}
#newsListWrap.pcFlex #newsList{
	flex: 1;
	padding-top: 0;
}
#newsList .newsBox > a{
	display: flex;
	flex-direction: row-reverse;
	gap: 3%;
}
#newsList .newsBox a .txts{
	flex: 1;
}
#newsList .newsBox a figure{
	width: 300px;
}

/*		single
-----------------------------*/
article{
 padding: 100px 0;
}
#newsDetail h3{
	margin-bottom: 40px;
}

/* =======================================
	contact
========================================== */
#contactForm{
	padding-top: 70px;
}
#contactLead{
	padding-bottom: 50px;
}
#contactLead .tel{
	 margin-top: 70px;
	padding: 40px 30px 30px;
}
#contactLead .tel dt{
 margin-bottom: 30px;
}
#contactLead .tel dd a{
 font-size: 4.2rem;
}
#contactLead .tel dd a::before{
	width: 28px;
	height: 38px;
	left: -35px;
	top: calc(50% - 15px);
}

/* =======================================
	form
========================================== */
.tb_cont th{
	border-bottom: 1px solid var(--wh);
	padding: 15px 2.5%;
	width: 25%;
}
.tb_cont td{
	border-bottom: 1px solid var(--base);
	padding: 15px 2.5%;
	width: 75%;
}
.tb_cont td input:not([type=checkbox]):not([type=radio]){
	padding: 8px;
	width: 80%;
}
.tb_cont td textarea{
	padding: 8px;
	width: 80% !important;
	height: 100px !important;
}
.tb_cont .hissu{
	padding: 3px 3%;
}
.tb_cont .zip{
	margin-right: 10px;
	width: 20%;
}
.tb_cont .zipBtn{
	font-size: 1.4rem;
	padding: 10px 14px;
}
.tb_cont .w50{
	width: 58%;
}
.tb_cont .fileBtn li{
	width: 33%;
}
.confirm {
  margin-top: 40px;
}
.tb_cont td input.radiobtn{
    width: auto;
}


/* =======================================
	privacypolicy
========================================== */
#simplePopup .popup-content .mainTitle{
	height: 150px !important;
}
#privacyMain{
	padding-top: 70px;
}
#privacyMain .h3Tit{
	font-size: 2.6rem;
}
#privacyMain .h4Tit{
	font-size: 2rem;
}
#closePopup span{
	font-size: 1.4rem !important;
}