/*=============================================================
 corporate.company index
=============================================================*/
/* setting */
:root {
  --space-what: clamp(40px, calc(40px + 0.1875 * (100vw - 768px)), 88px);
	--space-hisory: clamp(64px, calc(64px + 0.1796875 * (100vw - 768px)), 110px);
}

/*company-what-ashisuto
-------------------------------------------------------------*/
#company-what-ashisuto{
	overflow: hidden;
	background: url("/corporate/company/img/company-bg01.jpg") no-repeat;
	background-size: cover;
	background-position: center center;
	margin-bottom: 72px;
}
#company-what-ashisuto .contentsInner{
	padding-top: var(--space-what);
	padding-bottom: var(--space-what);
}
#company-what-ashisuto .contentsInner #company-what-ashisuto-box{
	max-width: 57.14%;
	margin-right: 42.86%;
}

/*company-history-area
-------------------------------------------------------------*/
#company-history-area{
	overflow: hidden;
	background: url("/corporate/company/img/company-bg02.jpg") no-repeat;
	background-size: cover;
	background-position: center top;
}
#company-history-area .contentsInner{
	padding-top: var(--space-hisory);
	padding-bottom: var(--space-hisory);
}

/*=============================================================
 corporate.company message
=============================================================*/
#message-area{margin-bottom: 72px;}
#message-area .message-ttl-box{
	position: relative;
	margin: clamp(60px, calc(60px + 0.015625 * (100vw - 768px)), 64px) 0 24px;
}
#message-area .message-ttl-box .text{
	position: absolute;
	top: 50%;
	left: 32px;
	transform: translateY(-50%);
}
#message-area .message-ttl-box .img{}

/*=============================================================
 corporate.company concept
=============================================================*/
/*behavioral-guidelines-area
-------------------------------------------------------------*/
#concept-area #behavioral-guidelines-area .img-guidelines{margin-top: 32px;}

/* behavioral-guidelines--num */
#concept-area #behavioral-guidelines-area .behavioral-guidelines--num{margin-top: 48px;}
#concept-area #behavioral-guidelines-area .behavioral-guidelines--num dt{
	display: flex;
	align-items: center;
	column-gap: 8px;
	color: var(--secondaryColor);
	margin-bottom: 10px;
}
#concept-area #behavioral-guidelines-area .behavioral-guidelines--num dt span{
	font-size: 2.0rem;
	display: block;
	font-weight: 700;
	line-height: 160%;
	position: relative;
}
#concept-area #behavioral-guidelines-area .behavioral-guidelines--num dt span:first-child{
	font-size: 1.8rem;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#concept-area #behavioral-guidelines-area .behavioral-guidelines--num dt span:first-child::before,
#concept-area #behavioral-guidelines-area .behavioral-guidelines--num dt span:first-child::after{
	content: '';
	display: block;
	border-radius: 50%;
	position: absolute;
}
#concept-area #behavioral-guidelines-area .behavioral-guidelines--num dt span:first-child::before{
	width: 40px;
	height: 40px;
	border: 1px solid var(--secondaryColor);
	top: calc((50% - 20px));
	left: calc((50% - 20px));
}
#concept-area #behavioral-guidelines-area .behavioral-guidelines--num dt span:first-child::after{
	width: 32px;
	height: 32px;
	border: 1px solid rgba(0, 140, 206, 0.50);
	top: calc((50% - 16px));
	left: calc((50% - 16px));
}


#concept-area #behavioral-guidelines-area .behavioral-guidelines--num dd + dt{margin-top: 48px;}

/*=============================================================
 corporate.company history
=============================================================*/
#history-area #ac--01,#history-area #ac--02,#history-area #ac--03{scroll-margin-top: 126px;}
#history-area .history-flow-area h2.ttl{
	color: rgba(0, 140, 206, 0.20);
	text-align: center;
	font-family: "Noto Sans JP";
	font-size: clamp(40px, calc(40px + 0.125 * (100vw - 768px)), 72px);
	font-style: normal;
	font-weight: 700;
	line-height: 100%;
	padding: clamp(40px, calc(40px + 0.15625 * (100vw - 768px)), 80px) 0 clamp(40px, calc(40px + 0.03125 * (100vw - 768px)), 48px);
}
/* sub-ttl */
#history-area .history-flow-area .sub-ttl{
	position: relative;
	display: flex;
	gap:80px;
	flex-wrap: wrap;
	padding-bottom: clamp(32px, calc(52px - 0.078125 * (100vw - 768px)), 52px);
}
#history-area .history-flow-area .sub-ttl h3.ttl{
  width: calc((100% - 80px) / 2);
  position: relative;
	text-align: left;
	margin: 0.5rem 0;
	clear: both;
	font-size: 18px;
	font-weight: 700;
	line-height: 160%;
	padding-left:1em;
}
#history-area .history-flow-area .sub-ttl h3.ttl::before{
	content: "";
	background: var(--primaryColor);
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 100%;
	position: absolute;
	top: 0.5em;
	left: 0;
}
#history-area .history-flow-area .sub-ttl h3.ttl.right::before{background: var(--secondaryColor);}

/* history-flow line*/
#history-area .history-flow-area .history-flow{
	position: relative;
	width: 100%;
	padding-bottom: 0;
}
#history-area .history-flow-area .history-flow::before,
#history-area .history-flow-area .history-flow::after,
#history-area .history-flow-area .sub-ttl::before,
#history-area .history-flow-area .sub-ttl::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--colorGray03);
}
#history-area .history-flow-area .history-flow::before,
#history-area .history-flow-area .sub-ttl::before{
	width: 1px;
	height: 100%;
	top: 0;
}
#history-area .history-flow-area .history-flow::after{
	width: 5px;
	height: 5px;
	border-radius: 50%;
}

/* history-flow*/
#history-area .history-flow-area .history-flow{
  position: relative;
  list-style: none;
	padding-bottom: 32px;
	margin-bottom: clamp(24px, calc(24px + 0.0625 * (100vw - 768px)), 40px);
}
#history-area .history-flow-area .history-flow-group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  position: relative;
  z-index: 1;
}
#history-area .history-flow-area .history-flow-group + .history-flow-group{margin-top: 32px;}
#history-area .history-flow-area .history-flow>.history-flow-group>li{
  position: relative;
  width: calc((100% - 80px) / 2);
  box-sizing: border-box;
  margin: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
#history-area .history-flow-area .history-flow>.history-flow-group>li [class^="list--circle--"]{margin-bottom: 0;margin-top: 6px;}
#history-area .history-flow-area .history-flow>.history-flow-group>li [class^="list--circle--"]>li + li{margin-top: 0px;}
#history-area .history-flow-area .history-flow>li.empty {
  background: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}
#history-area .history-flow-area .history-flow>.history-flow-group>li>span{
	display: block;
	text-align: left;
	font-size: clamp(18px, calc(18px + 0.0078125 * (100vw - 768px)), 20px);
	font-style: normal;
	font-weight: 700;
	line-height: 160%;
	color: var(--primaryColor);
}
#history-area .history-flow-area .history-flow>.history-flow-group>li.right>span{color: var(--secondaryColor);}

/*=============================================================
 corporate.company office(office-detail)
=============================================================*/
#office-area .link-arw--large + p,
#office-detail p + .map{margin-top: 16px;}

#office-detail .map{
  position: relative;
  width: 100%;
  padding-bottom: 72.67%;
  height: 0;
  overflow: hidden;
}
#office-detail .map iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 PC-large
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media (min-width:1920px){
	
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 tablet
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {

}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:767px){
/*=============================================================
 corporate.company index
=============================================================*/
/*company-what-ashisuto
-------------------------------------------------------------*/
#company-what-ashisuto{
	width: 100%;
	overflow: hidden;
	background: #EAF2F3 url("/corporate/company/img/company-bg01-sp.jpg") no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
}
#company-what-ashisuto .contentsInner{padding-bottom: clamp(280px, calc(280px + 0.5309734513 * (100vw - 541px)), 400px);}	
#company-what-ashisuto .contentsInner #company-what-ashisuto-box{
	max-width: 100%;
	margin-right: 0;
} 
	
/*company-history-area
-------------------------------------------------------------*/
#company-history-area{
	overflow: hidden;
	background: url("/corporate/company/img/company-bg02.jpg") no-repeat;
	background-size: cover;
	background-position: center top;
	margin-bottom: 62px;	
}
#company-history-area .contentsInner #history-area-box{}

	
/*=============================================================
 corporate.company message
=============================================================*/
#message-area .message-ttl-box{position: static;}
#message-area .message-ttl-box .text{
	position: static;
	transform: none;
	margin-bottom: 45px;
}
	
/*=============================================================
 corporate.company history
=============================================================*/
#history-area #ac--01,#history-area #ac--02,#history-area #ac--03{scroll-margin-top: 60px;}
/* sub-ttl */
#history-area .history-flow-area .sub-ttl{display: block;}
#history-area .history-flow-area .sub-ttl h3.ttl{width: 100%;}

/* history-flow line*/
#history-area .history-flow-area .history-flow{}
#history-area .history-flow-area .history-flow::before,
#history-area .history-flow-area .history-flow::after,
#history-area .history-flow-area .sub-ttl::before,
#history-area .history-flow-area .sub-ttl::after{content: none;}
#history-area .history-flow-area .history-flow::before,


/* history-flow*/
#history-area .history-flow-area .history-flow{padding-bottom: 0;}
#history-area .history-flow-area .history-flow-group { display: block;}
#history-area .history-flow-area .history-flow-group + .history-flow-group,
#history-area .history-flow-area .history-flow>.history-flow-group>li + li{margin-top: 24px;}
#history-area .history-flow-area .history-flow>.history-flow-group>li{
  width: 100%;
  display: block;
}
#history-area .history-flow-area .history-flow>.history-flow-group>li [class^="list--circle--"]{margin-bottom: 0;margin-top: 6px;}
#history-area .history-flow-area .history-flow>.history-flow-group>li [class^="list--circle--"]>li + li{margin-top: 0px;}
#history-area .history-flow-area .history-flow>.history-flow-group>li>span{display: block;}
}