@charset "UTF-8";

	.popup-elm{
		position: absolute;
		opacity: 0;
		visibility: hidden;
	}
	.popup-elm.on{
		position: relative;
		opacity: 1;
		visibility: visible;
	}
	.popup{
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		left: 0;
		padding: 0 16px;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		z-index: 5000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 600ms ease, visibility 600ms ease;
	}
	.is-show-popup .popup{
		opacity: 1;
		visibility: visible;
	}
	.statement-lead p{
		width: 0;
		overflow: hidden;
		white-space:nowrap;
		transition: width 1500ms ease-out;
	}
	.statement-lead p.on{
		width: 100%;
	}

	.carbopath-logo{
		opacity: 0;
		transition: opacity 600ms ease;
	}
	.carbopath-logo.on{
		opacity: 1;
	}

	.statement-lead2{
		opacity: 0;
		transition: opacity 600ms ease;
	}
	.statement-lead2.on{
		opacity: 1;
	}


@media screen and (min-width: 768px) {

	.popup-contents{
		position: relative;
		width: 680px;
		padding: 50px;
		background: #fff;
		border-radius: 10px;
	}
	.popup-header{
		margin: 0 0 40px;
	}
	.popup-header h2{
		font-size: 24px;
		font-weight: 700;
		color: #0245A0;
		line-height: 1.5;
	}
	.popup-detail{
		display: flex;
		align-items: center;
	}
	.popup-detail figure{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 210px;
		height: 180px;
	}
	.popup-elm1 figure img{
		width: 99px;
	}
	.popup-elm2 figure img{
		width: 148px;
	}
	.popup-elm3 figure img{
		width: 210px;
	}
	.popup-elm4 figure img{
		width: 58px;
	}
	.popup-elm5 figure img{
		width: 174px;
	}

	.popup-detail ul{
		padding: 0 0 0 40px;
		width: calc(100% - 210px);
	}
	.popup-detail ul li{
		position: relative;
		padding: 0 0 0 35px;
		font-size: 18px;
		line-height: 2;
	}
	.popup-detail ul li:before{
		content: "";
		display: block;
		position: absolute;
		top: 12px;
		left: 0;
		width: 20px;
		height: 10px;
		border-left: 3px solid #0245A0;
		border-bottom: 3px solid #0245A0;
		transform: rotate(-45deg);
	}
	.popup-detail ul li + li{
		margin-top: 10px;
	}

	.btn-popup-close{
		position: absolute;
		top: 50px;
		right: 50px;
		width: 20px;
		height: 20px;
		z-index: 50;
	}
	.btn-popup-close a{
		display: block;
		width: 100%;
		height: 100%;
	}
	.btn-popup-close span{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	.btn-popup-close span:before,
	.btn-popup-close span:after{
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -1px 0 0 -13px;
		display: block;
		width: 26px;
		height: 2px;
		background: #0245A0;
	}
	.btn-popup-close span:before{
		transform: rotate(45deg);
	}
	.btn-popup-close span:after{
		transform: rotate(-45deg);
	}

/* top
====================================================================*/

	.sec-top-inner,
	.main-top-inner{
		margin: auto;
		padding: 0 10px;
		max-width: 1220px;
	}

	

/* sec-header-top
====================================================================*/

	.sec-header-top h2{
		font-size: 74px;
		color: #073190;
	}
	.sec-header-top h2 + span{
		display: block;
		margin: 10px 0 0;
		font-size: 20px;
	}


/* top statement
====================================================================*/

	#statement{
		margin-top: 150px;
	}

	.statement-lead1{
		margin-top: 60px;
		line-height: 1.5;
	}
	.statement-lead1 p + p{
		margin-top: 12px;
	}
	.statement-lead1 span{
		display: inline-block;
		padding: 8px 5px;
		font-size: 24px;
		font-weight: 500;
		background: rgba(249,249,249,0.8);
	}
	.statement-lead2{
		margin-top: 150px;
		width: 100%;
		max-width: 690px;
		padding: 50px 40px;
		background: #fff;
		border-radius: 10px;
	}
	.statement-lead2 p{
		line-height: calc(42/18);
	}
	.statement-lead2 span{
		display: inline-block;
		font-size: 18px;
		font-weight: 500;
	}
	.statement-lead2 div + div{
		margin-top: 30px;
	}



/* about-top
====================================================================*/

	.about-top-chart-box{
		width: 1000px;
		transform-origin: top left;
	}

	.about-top-lead p{
		line-height: 2;
	}
	.about-top-chart{
		position: relative;
		margin: 50px 0 0;
	}
	.about-top-chart figure{
		margin: auto;
		max-width: 777px;
	}
	.chart-btn-top{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.chart-btn-btm{
		margin: 15px 0 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.chart-btn-btm .btn-chart-box{
		display: flex;
	}
	.chart-btn-btm .btn-chart-box .btn-chart + .btn-chart{
		margin-left: 15px;
	}
	.btn-chart-s{
		width: 180px;
	}
	.btn-chart-m{
		width: 250px;
	}
	.btn-chart-l{
		width: 250px;
	}
	.btn-chart a{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;
		height: 100px;
		border: 1px solid #0245A0;
		border-radius: 10px;
		line-height: calc(24/16);
		color: #0245A0;
		font-weight: 700;
		transition: opacity 600ms ease;
	}
	.btn-chart a:after{
		position: absolute;
		margin: auto;
		top: 0;
		right: 10px;
		bottom: 0;
		content: "";
		display: block;
		width: 10px;
		height: 17px;
		background: url(../img/common/arrow_bl.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 600ms ease;
	}
	.btn-chart a:hover{
		opacity: 0.7;
	}


	.about-top-list{
		display: flex;
		margin: 120px -13px 0;
	}
	.about-top-list .about-top-list_item{
		padding: 0 13px;
		width: 33.333%;
	}
	.about-top-list .about-top-list_item a{
		display: block;
		overflow: hidden;
		border-radius: 10px;
		border: 1px solid #ddd;
		transition: opacity 600ms ease;
	}
	.about-top-list .about-top-list_item a:hover{
		opacity: 0.7;
	}
	.about-top-list .about-top-list_item h2{
		line-height: calc(42/38);
		color: #073190;
		font-size: min(3.16vw,38px);
	}
	.about-top-list_item-txt{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20px;
		height: 200px;
	}
	.about-top-list_item-txt p{
		line-height: calc(28/16);
		font-size: min(1.33vw,16px);
	}
	.about-top-list_item-txt .arrow{
		position: absolute;
		bottom: 20px;
		right: 20px;
		width: 48px;
		height: 48px;
		background: #0245A0;
		border-radius: 24px;
	}
	.about-top-list_item-txt .arrow:after{
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		content: "";
		display: block;
		width: 10px;
		height: 17px;
		background: url(../img/common/arrow_wh.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 600ms ease;
	}


}



@media screen and (max-width: 767px) {

	.popup-contents{
		position: relative;
		width: 100%;
		padding: 30px;
		background: #fff;
		border-radius: 10px;
	}

	.popup-header h2{
		font-size: 18px;
		font-weight: 700;
		color: #0245A0;
		line-height: 1.5;
	}
	.popup-detail figure{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup-elm1 figure{
		height: 175px;
	}
	.popup-elm1 figure img{
		width: 99px;
	}
	.popup-elm2 figure{
		height: 200px;
	}
	.popup-elm2 figure img{
		width: 148px;
	}
	.popup-elm3 figure{
		height: 185px;
	}
	.popup-elm3 figure img{
		width: 210px;
	}
	.popup-elm4 figure{
		height: 200px;
	}
	.popup-elm4 figure img{
		width: 58px;
	}
	.popup-elm5 figure{
		height: 200px;
	}
	.popup-elm5 figure img{
		width: 174px;
	}
	.popup-detail ul{
	}
	.popup-detail ul li{
		position: relative;
		padding: 0 0 0 24px;
		font-size: 14px;
		line-height: 2;
	}
	.popup-detail ul li:before{
		content: "";
		display: block;
		position: absolute;
		top: 8px;
		left: 0;
		width: 14px;
		height: 8px;
		border-left: 2px solid #0245A0;
		border-bottom: 2px solid #0245A0;
		transform: rotate(-45deg);
	}
	.popup-detail ul li + li{
		margin-top: 10px;
	}

	.btn-popup-close{
		position: absolute;
		top: 30px;
		right: 30px;
		width: 20px;
		height: 20px;
		z-index: 50;
	}
	.btn-popup-close a{
		display: block;
		width: 100%;
		height: 100%;
	}
	.btn-popup-close span{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	.btn-popup-close span:before,
	.btn-popup-close span:after{
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -1px 0 0 -13px;
		display: block;
		width: 26px;
		height: 2px;
		background: #0245A0;
	}
	.btn-popup-close span:before{
		transform: rotate(45deg);
	}
	.btn-popup-close span:after{
		transform: rotate(-45deg);
	}

/* top
====================================================================*/

	.sec-top-inner{
		padding: 0 16px;
	}



/* sec-header-top
====================================================================*/

	.sec-header-top h2{
		font-size: 38px;
		color: #073190;
	}
	.sec-header-top h2 + span{
		display: block;
		margin: 10px 0 0;
	}


/* top statement
====================================================================*/
	.carbopath-logo{
		width: 280px;
	}

	#statement{
		margin-top: 65px;
	}
	.statement-lead1{
		margin-top: 25px;
		line-height: 1.5;
	}
/*	.statement-lead p{
		width: 100%;
		overflow: hidden;
		white-space:nowrap;
	}*/
	.statement-lead1 p + p{
		margin-top: 12px;
	}
	.statement-lead1 span{
		display: inline-block;
		padding: 6px 5px;
		font-size: 16px;
		font-weight: 500;
		background: rgba(249,249,249,0.8);
	}
	.statement-lead2{
		margin-top: 320px;
		width: 100%;
		padding: 30px 16px;
		background: #fff;
		border-radius: 10px;
	}
	.statement-lead2 p{
		line-height: calc(30/14);
	}
	.statement-lead2 span{
		display: inline-block;
		font-size: 13px;
		font-weight: 500;
	}
	.statement-lead2 div + div{
		margin-top: 25px;
	}


/* about-top
====================================================================*/

	.about-top-chart-box{
		width: 340px;
		transform-origin: top left;
	}

	.about-top-lead p{
		line-height: 2;
	}
	.about-top-chart{
		position: relative;
		margin: 25px 0 0;
	}
	.about-top-chart figure{
		margin: auto;
	}
	.chart-btn-top{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.chart-btn-btm{
		margin: 15px 0 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.chart-btn-btm .btn-chart-box{
		display: flex;
	}
	.chart-btn-btm .btn-chart + .btn-chart-box,
	.chart-btn-btm .btn-chart-box .btn-chart + .btn-chart{
		margin-left: 8px;
	}
	.btn-chart-s{
		width: 80px;
	}
	.btn-chart-m{
		width: 115px;
	}
	.btn-chart-l{
		width: 123px;
	}
	.btn-chart a{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;
		height: 44px;
		border: 1px solid #0245A0;
		border-radius: 6px;
		font-size: 12px;
		line-height: calc(12/8);
		color: #0245A0;
		font-weight: 700;
		font-size: 8px;
		transition: opacity 600ms ease;
	}
	.btn-chart a:after{
		position: absolute;
		margin: auto;
		top: 0;
		right: 6px;
		bottom: 0;
		content: "";
		display: block;
		width: 5px;
		height: 8px;
		background: url(../img/common/arrow_bl.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 600ms ease;
	}


	.about-top-list{
		margin: 60px 0 0;
	}
	.about-top-list_item + .about-top-list_item{
		margin-top: 16px;
	}
	.about-top-list .about-top-list_item a{
		display: block;
		overflow: hidden;
		border-radius: 10px;
		border: 1px solid #ddd;
		transition: opacity 600ms ease;
	}
	.about-top-list .about-top-list_item h2{
		line-height: 1.5;
		color: #073190;
		font-size: 30px;
	}
	.about-top-list .about-top-list_item h2 br{
		display: none;
	}
	.about-top-list_item-txt{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20px;
		height: 130px;
	}
	.about-top-list_item-txt p{
		line-height: calc(23/14);
	}
	.about-top-list_item-txt .arrow{
		position: absolute;
		bottom: 16px;
		right: 16px;
		width: 48px;
		height: 48px;
		background: #0245A0;
		border-radius: 24px;
	}
	.about-top-list_item-txt .arrow:after{
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		content: "";
		display: block;
		width: 10px;
		height: 17px;
		background: url(../img/common/arrow_wh.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		transition: transform 600ms ease;
	}

}


@media screen  and (max-width: 374px){
  .sec-top-inner {
      padding: 0 6px;
  }

  .statement-lead1 span {
      font-size: 11px;
  }
  .statement-lead2 span{
      font-size: 9px;
  }



}