@charset "utf-8";
/* ==================================================================
CSS information
style info : INDEX
================================================================== */


/* --------------------------------------------------------
OVERWRITE
-------------------------------------------------------- */

/* --------------------------------------------------------
COMMON
-------------------------------------------------------- */
.flower { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.flower img { position: absolute; top: 0; width: 100%; height: auto;}

@media screen and (max-width: 640px) {
.flower .f1 { width: calc(129/750*100%); left: 0; margin-top: calc(67/750*100%);}
.flower .f2 { width: calc(75/750*100%); right: 0; margin-top: calc(405/750*100%);}
.flower .f3 { width: calc(115/750*100%); left: 0; margin-top: calc(520/750*100%);}

.flower .f4 { width: calc(103/750*100%); left: 0; margin-top: calc(477/750*100%);}
.flower .f5 { width: calc(101/750*100%); right: calc(36/750*100%); margin-top: calc(567/750*100%); z-index: 5001;}

.flower .f6 { width: calc(128/750*100%); left: calc(17/750*100%); margin-top: calc(760/750*100%); z-index: 5002;}

.flower .f7 { width: calc(55/750*100%); right: 0; margin-top: calc(-57/750*100%); }

.flower .f8 { width: calc(118/750*100%); right: 0; margin-top: calc(86/750*100%); z-index: 5003;}

.flower .f9 { width: calc(116/750*100%); left: calc(105/750*100%); margin-top: calc(1198/750*100%); z-index: 5004;}

.flower .f10 { width: calc(102/750*100%); left: 0; margin-top: calc(86/750*100%); z-index: 5005;}
.flower .f11 { width: calc(101/750*100%); left: calc(165/750*100%); margin-top: calc(1247/750*100%); z-index: 5006;}

.flower .f12 { width: calc(98/750*100%); right: 0; margin-top: calc(442/750*100%); z-index: 5007;}

.flower .f13 { width: calc(91/750*100%); right: 0; margin-top: calc(470/750*100%); z-index: 5008;}

.flower .f14 { width: calc(81/750*100%); left: 0; margin-top: calc(533/750*100%); z-index: 5009;}

.flower .f15 { display: none;}

}
@media screen and (min-width: 641px) {
	.flower .f1 { width: calc(177/1220*100%); left: calc(78/1220*100%); margin-top: calc(89/1220*100%);}
	.flower .f2 { width: calc(110/1220*100%); right: calc(-58/1220*100%); margin-top: calc(174/1220*100%);}
	.flower .f3 { width: calc(127/1220*100%); left: calc(-42/1220*100%); margin-top: calc(735/1220*100%);}

	.flower .f4 { width: calc(139/1220*100%); left: calc(-61/1220*100%); margin-top: calc(328/1220*100%);}
	.flower .f5 { width: calc(110/1220*100%); right: calc(140/1220*100%); margin-top: calc(487/1220*100%); z-index: 5001;}

	.flower .f6 { width: calc(141/1220*100%); right: calc(77/1220*100%); margin-top: calc(568/1220*100%); z-index: 5002;}

	.flower .f7 { width: calc(133/1220*100%); left: calc(78/1220*100%); margin-top: calc(551/1220*100%); }

	.flower .f8 { width: calc(110/1220*100%); right: calc(58/1220*100%); margin-top: calc(-33/1220*100%); }

	.flower .f9 { width: calc(127/1220*100%); left: calc(-102/1220*100%); margin-top: calc(173/1220*100%); z-index: 5003;}

	.flower .f10 { width: calc(127/1220*100%); right: calc(-73/1220*100%); margin-top: calc(139/1220*100%); z-index: 5004;}
	.flower .f11 { width: calc(139/1220*100%); left: calc(-61/1220*100%); margin-top: calc(344/1220*100%); z-index: 5005;}

	.flower .f12 { width: calc(110/1220*100%); left: calc(-121/1220*100%); margin-top: calc(394/1220*100%); z-index: 5006;}

	.flower .f13 { width: calc(141/1220*100%); right: calc(-84/1220*100%); margin-top: calc(476/1220*100%); z-index: 5007;}

	.flower .f14 { display: none;}

	.flower .f15 { width: calc(127/1220*100%); left: calc(-25/1220*100%); margin-top: calc(258/1220*100%); }

}


@media screen and (min-width: 641px) {
	.btn_ov a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden; display: block;}
	.btn_ov a:hover { -webkit-transform: scale(1.05); transform: scale(1.05);}

}





/* --------------------------------------------------------
#mainvisual
-------------------------------------------------------- */
#mainvisual { position: relative; padding: 8.933333% 0 1.3%; }
#mainvisual::before { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: auto; background: #b4d7e3; padding-top: calc(263/750*100%);}
#mainvisual h1 { width: 45.333333%; margin: 0 auto 6%;}
#mainvisual .visual { width: calc(710/750*100%); margin: 0 auto;}
@media screen and (max-width: 640px) {
#mainvisual .inner { padding: 0; }
}

@media screen and (min-width: 641px) {
	#mainvisual { padding: calc(137/1220*100%) 0 0; }
	#mainvisual::before { background: #9ed9f5; padding-top: calc(523/1220*100%);}

	#mainvisual h1 { max-width: 340px; width: calc(340/1140*100%); margin: 0 auto 3.070175%;}
	#mainvisual .visual { max-width: 1260px; width: calc(1260/1140*100%); margin: 0 0 0 -5.263157%;}

}

#visual {}
@media screen and (min-width: 1221px) {
	#mainvisual { padding: 137px 0 0; }
	#mainvisual::before { padding-top: 523px;}
}


/* --------------------------------------------------------
#msg
-------------------------------------------------------- */
#msg { position: relative; padding: 10.666666% 0; }
#msg .hl { margin-bottom: 6.923076%; }
#msg .text { }

@media screen and (min-width: 641px) {
	#msg { padding: 5.737704% 0 8.196721%; }
	#msg .hl { max-width: 770px; width: calc(770/1140*100%); margin: 0 auto 4.385964%; }
	#msg .text { max-width: 770px; width: calc(770/1140*100%); margin: 0 auto; }

}
@media screen and (min-width: 1221px) {
	#msg { padding: 70px 0 100px; }
}


/* --------------------------------------------------------
#tvcm
-------------------------------------------------------- */
#tvcm { position: relative; padding: 8% 0; background: #4e9ecc; }
#tvcm h2 { margin-bottom: 6.153846%; }
#tvcm .readtext { margin-bottom: 10.461538%; }
#tvcm dl { position: relative;}
#tvcm dl .name { margin-bottom: 2.615384%;}
#tvcm dl .text { width: calc(322/650*100%); /*margin-left: calc(328/650*100%);*/ float: right;}
#tvcm dl .pic { width: calc(300/650*100%); float: left;}

@media screen and (min-width: 641px) {
	#tvcm { padding: 4.098360% 0 4.918032%; }
	#tvcm h2 { max-width: 770px; width: calc(770/1140*100%); margin: 0 auto 2.631578%; }
	#tvcm .readtext { max-width: 770px; width: calc(770/1140*100%); margin: 0 auto 3.508771%; }
	#tvcm dl { padding-top: calc(82/1140*100%);}
	#tvcm dl .name {max-width: 480px; width: 42.105263%; margin-left: 28.947368%; margin-bottom: 2.192982%; }
	#tvcm dl .text {max-width: 480px; width: 42.105263%; margin-left: 28.947368%; float: none;}
	#tvcm dl .pic { max-width: 300px; width: calc(300/1140*100%); float: none; position: absolute; top: 0; left: 0;}


}
@media screen and (min-width: 1221px) {
	#tvcm { padding: 50px 0 60px; }
}


/* --------------------------------------------------------
#mv
-------------------------------------------------------- */
#mv { position: relative; padding: 12% 0 5.333333%; background: #2a7aa9 url(../_img/mv/line_t.png) top center repeat-x;}
#mv .line { padding-bottom: calc(75/750*100%); margin-bottom: calc(40/750*100%);}
#mv .line::before { content: ""; display: block; background: url(/cm/_img/mv/line_b.png) bottom center repeat-x; width: 100%; height: auto; padding-top: 40px; position: absolute; bottom: 0; left: 0;}
#mv h2 { margin-bottom: 5.230769%; }
#mv ul { position: relative;}
#mv ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; }
#mv ul li { width: calc(305/650*100%); }
@media screen and (max-width: 640px) {
#mv { background-size: 213%;}
#mv .line::before { background-size: 213%;}
}
@media screen and (min-width: 641px) {
	#mv { padding: 6.557377% 0 2.459016%; }
	#mv .line { padding-bottom: calc(80/1220*100%); margin-bottom: calc(30/1220*100%);}

	#mv h2 { max-width: 770px; width: calc(770/1140*100%); margin: 0 auto 5%; }
	#mv ul li { width: calc(480/1140*100%); }

	#mv .btn_link { width: calc(780/1140*100%); margin: 0 auto;}
}
@media screen and (min-width: 1221px) {
	#mv { padding: 80px 0 30px; }
	#mv .line { padding-bottom: 80px; margin-bottom: 30px;}
}



/* --------------------------------------------------------
#business
-------------------------------------------------------- */
#business { background: #fff; }

#business #headline { padding: 8% 0 6%; }
#business #headline h2 { margin-bottom: 2.307692%; }
#business #headline .text { }

#business #subheadline { padding: 6.666666% 0 5.333333%; }
#business #subheadline h2 { }

#business .sec .inner { padding: 0;}
#business .sec .copy { }
#business .sec .btn { display: block; position: absolute; bottom: 0; }

@media screen and (max-width: 640px) {
#business .sec .text { position: relative;}
#business .sec .btn { left: 0;}
}
@media screen and (min-width: 641px) {
	#business #headline { padding: 6.557377% 0 4.918032%; }
	#business #headline h2 { max-width: 770px; width: calc(770/1140*100%); margin: 0 auto 1.929824%; }
	#business #headline .text { max-width: 770px; width: calc(770/1140*100%); margin: 0 auto;}
	
	#business #subheadline { padding: 4.918032% 0 4.098360%; }
	#business #subheadline h2 { max-width: 770px; width: calc(770/1140*100%); margin: 0 auto; }
}
@media screen and (min-width: 1221px) {
	#business #headline { padding: 80px 0 60px; }
	#business #subheadline { padding: 60px 0 50px; }
}



/* #bu1
-------------------------------------------------------- */
#bu1 .btn { margin-bottom: calc(88/750*100%); }
@media screen and (min-width: 641px) {
	#bu1 { background: url(/cm/_img/business/bu1/bg.jpg);}
	#bu1 .text { max-width: 709px; width: calc(709/1220*100%); position: absolute; top: 0; right: calc(-126/1220*100%); margin-top: calc(-11/1220*100%); }
	#bu1 .btn { max-width: 180px; width: calc(180/709*100%); position: absolute; left: calc(361/709*100%); margin-bottom: calc(35/709*100%);}
}


/* #bu2
-------------------------------------------------------- */
#bu2 .btn { margin-bottom: calc(122/750*100%); }
@media screen and (min-width: 641px) {
	#bu2 { background: url(/cm/_img/business/bu2/bg.jpg);}
	#bu2 .text { max-width: 697px; width: calc(697/1220*100%); position: absolute; top: 0; left: calc(-11/1220*100%); margin-top: calc(-18/1220*100%); }
	#bu2 .btn { max-width: 180px; width: calc(180/697*100%); position: absolute; left: calc(92/697*100%); margin-bottom: calc(57/697*100%);}
}


/* #bu3
-------------------------------------------------------- */
#bu3 .btn { margin-bottom: calc(99/750*100%); }
@media screen and (min-width: 641px) {
	#bu3 { background: url(/cm/_img/business/bu3/bg_l.jpg), url(/cm/_img/business/bu3/bg.jpg); background-repeat: no-repeat, repeat; background-position: center;}
	#bu3 .text { max-width: 744px; width: calc(744/1220*100%); position: absolute; top: 0; right: calc(-105/1220*100%); margin-top: calc(-8/1220*100%); }
	#bu3 .btn { max-width: 180px; width: calc(180/744*100%); position: absolute; left: calc(386/744*100%); margin-bottom: calc(53/744*100%);}
}


/* #bu4
-------------------------------------------------------- */
#bu4 .btn { margin-bottom: calc(96/750*100%); }
@media screen and (min-width: 641px) {
	#bu4 { background: url(/cm/_img/business/bu4/bg.jpg); }
	#bu4 .text { max-width: 663px; width: calc(663/1220*100%); position: absolute; top: 0; right: calc(-148/1220*100%); margin-top: calc(-44/1220*100%); }
	#bu4 .btn { max-width: 180px; width: calc(180/663*100%); position: absolute; left: calc(205/663*100%); margin-bottom: calc(53/663*100%);}
}


/* #bu5
-------------------------------------------------------- */
#bu5 .btn { margin-bottom: calc(89/750*100%); }
@media screen and (min-width: 641px) {
	#bu5 { background: url(/cm/_img/business/bu5/bg_l.jpg), url(/cm/_img/business/bu5/bg.jpg); background-repeat: no-repeat, repeat; background-position: center;}
	#bu5 .text { max-width: 561px; width: calc(561/1220*100%); position: absolute; top: 0; left: calc(36/1220*100%); margin-top: calc(32/1220*100%); }
	#bu5 .btn { max-width: 180px; width: calc(180/561*100%); position: absolute; left: calc(215/561*100%); margin-bottom: calc(32/561*100%);}
}



/* --------------------------------------------------------
#etc
-------------------------------------------------------- */
#etc { position: relative; padding: 8% 0 7.733333%; }
#etc .hl { margin-bottom: 9.230769%; }
#etc ul { position: relative;}
#etc ul { margin-bottom: 8.769230%; }
#etc ul li { margin-bottom: 4.307692%;}
#etc ul li:last-child { margin-bottom: 0;}
#etc .text { margin-bottom: 1.230769%; }

@media screen and (min-width: 641px) {
	#etc { padding: 5.737704% 0; }
	#etc .inner { padding: 0;}
	#etc .hl { max-width: 770px; width: calc(770/1220*100%); margin: 0 auto calc(50/1220*100%); }
	#etc ul { position: relative; margin-bottom: calc(60/1220*100%); }
	#etc ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between; }
	#etc ul li { width: calc(380/1220*100%); margin-bottom: 0; }
	#etc .text { max-width: 770px; width: calc(770/1220*100%); margin: 0 auto calc(20/1220*100%); }
	#etc .btn { width: calc(444/1220*100%); margin: 0 auto;}
}
@media screen and (min-width: 1221px) {
	#etc { padding: 70px 0 70px; }
}