@charset "UTF-8";
/* CSS Document */
.content1200 {width: calc( 100% - 40px); margin-left: auto; margin-right: auto; max-width: 1200px;}
.content1260 {width: calc( 100% - 40px); margin-left: auto; margin-right: auto; max-width: 1260px;}
.title { font-size: 60px; line-height: 1.2; color: #223062;}
.subTitle { font-size: 15px; color: #333333;}

/* TOP PAGE */
#mainVisual {position: relative; margin-bottom: 15px;}
#mainVisual * {box-sizing: border-box;}
#mainVisual .txt {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0; width: 100%; text-align: center; color: #fff; font-size: 70px; line-height: 2.0; font-weight: bold;}
#mainVisual h2 span {color: #5f92bf;}

#news {padding: 60px 0; background: #fff;}
#news .col1 {width: 23%;}
#news .col2 {width: 75%;}
#news .col2 ul li {border-top: 1px solid #b5bacb; padding: 20px 50px 20px 0; position: relative;}
#news .col2 ul li::after {content: ''; width: 36px; height: 36px; background: url(../img/top/ic_1.svg) no-repeat; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 0;}
#news .col2 ul li:last-of-type {border-bottom: 1px solid #b5bacb;}
#news .col2 ul li a {font-size: 16px; text-decoration: none; color: #000;}
#news .col2 ul li a .robotoFont {font-weight: 200;}
#news .col2 ul li a p:nth-of-type(1) {width: 80px; color: #223062;}
#news .col2 ul li a p:nth-of-type(2) {width: calc(100% - 100px); position: relative; color: #333333;}
#news .col2 ul li a label {border-radius: 50px; background: linear-gradient( to right , #5486b6 , #143066); color: #fff; font-size: 10px; width: 100px; display: block; text-align: center; position: absolute; top: 0; left: 0; line-height: 1; padding: 5px 0;}
#news .col2 ul li a span {display: block;}
#news .col2 ul li a:hover {opacity: 0.6;}
#news .col2 .btnMore {background: #fff; border-radius: 50px; box-shadow: 0 0 10px #ccc; color: #000; text-decoration: none; padding: 15px 0; display: block; width: 250px; margin: 20px 0 0 auto; text-align: center; color: #223062; font-weight: bold;}
#news .col2 .btnMore:hover {background: linear-gradient( to right , #5486b6 , #143066); color: #fff;}

#about {background: #fff; padding: 60px 0;}
#about .content1080 {position: relative;}
#about .content1080 .col1 {width: 40%;}
#about .content1080 .col1 .fontSize06 {margin: 80px 0 50px; line-height: 2; color: #4d4d4d;}
#about .content1080 .col2 {position: absolute; top: 0; right: -10%; width: 62%;}
#about .content1080 .col2 .ceo {position: relative;}
#about .content1080 .col2 .ceo .info {color: #223062; position: absolute; left: 40px; bottom: 40px; font-size: 13px; }
#about .content1080 .col2 .ceo .info img {width: 54px; margin-bottom: 20px;}
#about .content1080 .col2 .ceo .info span {display: block; font-size: 20px; margin-top: 5px;}


#service {background: #fff;}
#service .serviceTop {background: #fff; padding: 100px 0 40px; text-align: center;}
#service .row {padding: 60px 0 0;}
#service .row .col1 {width: 30%; max-width: 350px;}
#service .row .col2 {width: 60%; position: relative;}
#service .row .col1 .boxWhite {border-radius: 20px; padding: 60px 40px; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);}
#service .row .col1 .boxWhite .title {font-size: 36px; text-align: center;}
#service .row .col1 .boxWhite .title sup {font-size: 20px; margin-left: 3px;}
#service .row .col1 .boxWhite .subTitle {text-align: center; color: #223062;}
#service .row .col1 .boxWhite .fontSize09 {margin: 30px 0; color: #223062;}
#service .row .col1 .boxWhite .btnMore {text-align: center;}
#service .row1 {background: linear-gradient( to right , #5486b6 , #143066);}
#service .row1 .col1 h4 img {width: 200px;}
#service .row1 .col2 .txtLine {position: absolute; top: -32%; right: 6%; max-width: 340px; width: 45%;}
#service .row2 {background: #b70e03; border-top: 5px solid #fff;}
#service .row2 .col1 {width: 30%;}
#service .row2 .col2 {width: 68%;}
#service .row2 .moreLink::after {background-image: url("../img/common/linkout.svg");}


#other {padding: 80px 0; background: #fff;}
#other .content {background: linear-gradient( to right , #5486b6 , #143066); padding: 60px 0;}
#other .content1080 p {height: 300px; padding: 50px; color: #fff; font-weight: bold; border: 1px solid #fff;}



@media screen and ( max-width:1339px ) {
	.title {font-size: 4vw;}
	.subTitle {font-size: 1.5vw;}
	
	#mainVisual h2 {font-size: 4vw;}

	#about .content1080 .col1 .fontSize06 {margin: 20px 0;}

	#service .row .col1 .boxWhite .fontSize09 {font-size: 14px;}
	
}

@media screen and ( max-width:810px ) {
	#service .row .col1 .boxWhite {padding: 20px 10px;}
	#service .row1 .col2 .txtLine {top: -30%;}
}

@media screen and ( max-width:767px ) {
	.title {font-size: 8vw; text-align: center;}
	.subTitle {font-size: 3vw; text-align: center; margin-bottom: 20px;}


	#mainVisual h2 {font-size: 8vw;}

	#news {padding-bottom: 0;}
	#news .col1 {width: 100%; text-align: center; margin-bottom: 20px;}
	#news .col2 {width: 100%;}
	#news .col2 ul li a p:nth-of-type(1) {width: 100%; margin-bottom: 10px;}
	#news .col2 ul li a p:nth-of-type(2) {width: 100%;}
	#news .col2 ul li a label {position: static; margin-bottom: 10px;}
	#news .col2 ul li a span {padding-left: 0; line-height: 1.7;}
	#news .col2 .btnMore {margin: 40px auto 0; padding: 1.2em 0;}

	#about {padding-bottom: 0;}
	#about .content1080 .col1 {width: 100%; margin-bottom: 40px;}
	#about .content1080 .col1 .fontSize06 {margin: 0;}
	#about .content1080 .col1 .btnMore {margin-top: 20px; text-align: center;}
	#about .content1080 .col2 {position: static; width: 100%;}
	#about .content1080 .col2 .ceo .info {left: 3vw; bottom: 3vw; font-size: 3vw;}
	#about .content1080 .col2 .ceo .info img {margin-bottom: 10px;}

	#service .serviceTop {padding: 60px 0 20px;}
	#service .row .col1 {width: 100%; margin: 0 auto 20px;}
	#service .row .col2 {width: 100%;}
	#service .row .col1 .boxWhite {padding: 5vw;}
	#service .row .col1 .boxWhite .title {font-size: 6vw;}
	#service .row1 .col1 h4 img {width: 150px;}
	#service .row1 .col2 {margin-top: 5vw;}
	#service .row1 .col2 .txtLine {right: 3vw; top: -15vw;}
	#service .row1 .content1260 {width: 100%;}
	#service .row1 .content1260 .col1 {padding: 0 20px;}
	#service .row1 .content1260 .col2 .txt {/*width: 99%;*/ margin: 0 0 0 auto; display: block; padding-left: 8%;}
	#service .row2 .col2 {margin-top: 10vw;}

	#other {padding: 40px 0;}
}

.image-link {
    display: inline-block;
    text-decoration-color: #fff;
	transform: translateY(-50%) translateX(10%);
}

.image-link img {
    width: 25%;
    height: auto; /* �������������� */
	filter: drop-shadow(0px 0px 4px #fff);
}

.image-caption {
    display: block;
    font-size: 1.2em;
    color: #fff;
}