@charset "utf-8";

/* *****************************************************************************
   タブレット用のスタイル記述
***************************************************************************** */
@media screen and (min-width: 481px) {
	/* -----------------------------------------------------------------------------
	 財団カスタマイズ
	----------------------------------------------------------------------------- */
	/* 2分割・3分割・4分割 */
	.half,
	.trisection,
	.quarter{
		flex-direction: row;
		flex-wrap: wrap;
	}
	.half .left,
	.half .right,
	.trisection .left,
	.trisection .center,
	.trisection .right,
	.quarter .left1,
	.quarter .left2,
	.quarter .right1,
	.quarter .right2{
		width: calc(50% - 2vw);
	}
	.half-flex {
		display: flex;
		gap: .75%;
	}
	.half-flex .left,.half-flex .right{width: 49.25%}
	/* flow 横 */
	.flow-area1 ul li{
		width: calc(50% - 20px);
		box-sizing: border-box;
		margin: 2.5em 20px 1em 0;
	}
	.flow-area1 ul li:before{
		left: 100%;
		right: auto;
		top: 0;
		bottom: 0;
		margin: auto 0;
		width: 20px;
		height: 40px;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
	}
	.flow-area1 ul li:last-child{
		margin-right: 0;
	}
	
	/* お問合せ */
	.contact{
		flex-direction: column;
	}
	.contact .left,
	.contact .right{
		width: 100%;
	}
	
	.half-flex {

	}
	/* -----------------------------------------------------------------------------
	 個別設定
	----------------------------------------------------------------------------- */
	#top-contents .slider img {
		max-height: 580px;
	}
	#top-contents .slider::after  {
		height: 250px;
	}
	.ttl-p::after {
		max-width: 200px;
        max-height: 200px;
		z-index: 1;
	}
	.ttl01 {
  width: max-content;
		margin: auto 100px auto auto}
	#top-contents .layer3{z-index: 2}
	#top-contents .layer3 img{width: 100px;}
	.tab-none {
		display: none;
	}
	.sp-none {
		display: block;
	}

	.con1 .h1 .parts-h1 {
		max-width: 500px;
		margin: 60px auto 0;font-size: 1.65rem;
	}
	.con1 .wrap .parts-h1 {
		font-size: 1.75rem}
	.con1 .h1 .parts-h1::before {
		bottom: -20px;
	}
	.con1 ul.w1024 {
		flex-direction: row;
		gap: 20px;
	}
	.con1 ul.w1024 li {
		width: calc((100% - 20px) / 2);
	}
	.con1 .solve p {font-size: 1.5rem;}
	
	.con2 .parts-txt-img h3 {
		margin-bottom: 1rem;
	}
	
	.con4 li {
		background-size: 300px;}
	
	.con3 li h3 {
		font-size: 1.5rem;}
	
	.cta-lead{font-size: 1.65em;}
	.cta .cta-a {
		padding:0em 1.25em 0 .5em;
		font-size: 2em;
	}
	.cta .cta-a::after {
		font-size: 2rem;
		top: 50%;
		right: 24px;
	}
	
	.con6 .half-flex {
    	gap: 0;
		flex-direction: column;}
	.half-flex .parts-map {
		width: 100%;}
	 .half-flex .parts-map iframe {
		 height: 300px}
	
}

@media screen and (min-width: 641px) {
		#top-contents .layer3 img{width: 150px;}
	.ttl01 {
  width: fit-content;
		margin: auto;}
}