@charset "UTF-8";


/*common*/
:root {
  --color00: #FFFFFF;
  --color01: #fbece4;
  --color02: #f7d9c8;
  --color05: #e89976;
  --color07: #df6d48;
  --color10: #d3171a;
  
  --color11: #e4007f;
  
  --color92: #eeeeee;
  --color93: #dddddd;
  --color94: #cccccc;
  --color95: #aaaaaa;
  --color96: #999999;
  --color97: #666666;
  --color98: #333333;
  --color99: #000000;
  
  --f_sans: "Noto Sans JP", sans-serif;
  --f_serif: "Noto Serif JP", serif;
  
  --f_w100: 100;
  --f_w200: 200;
  --f_w300: 300;
  --f_w400: 400;
  --f_w500: 500;
  --f_w600: 600;
  --f_w700: 700;
  --f_w800: 800;
  --f_w900: 900;




}



html { scroll-behavior: smooth;}
html * { font-feature-settings: "palt";}
a { text-decoration: none;}
body { font-family: "Noto Sans JP", sans-serif; font-weight: 500; min-height: 100vh; background: var(--color00); letter-spacing: 0.5px;}

a,
a:hover,
a *,
a:hover * { transition: ease .5s;}

img { width: 100%; height: auto;}

a img { transform: scale(1); transition: ease .5s;}
a:hover img { transform: scale(1); transition: ease .5s; opacity: 0.7;}


@keyframes waveMove {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-50%); }
}



/*PC*/
@media screen and (min-width: 1680px) {

html {}
body { margin: 0; padding: 0; color: var(--color98); font-size: 17px;}


.pc { display: block;}
.pcBr { display: inline-block;}
.sp { display: none;}
.spBr { display: none;}

/*-------------------------------------*/

.wrap { width: 100%; min-height: 100vh; display: flex; background: url("../images/com/bg.png") 0 0; background-attachment: fixed; position: relative; z-index: 5; overflow: hidden;}

/*figure*/
/*.figure01L { position: fixed; z-index: 10; top: -60px; left: 100px; width: 58px;}
.figure02L { position: fixed; z-index: 10; top: -50px; left: 200px; width: 90px;}
.figure03L { position: fixed; z-index: 10; top: 70px; left: 177px; width: 33px;}
.figure04L { position: fixed; z-index: 10; bottom: 186px; left: 6px; width: 109px;}
.figure05L { position: fixed; z-index: 10; bottom: -40px; left: -150px; width: 279px;}
.figure06L { position: fixed; z-index: 10; bottom: 24px; left: -20px; width: 141px;}
.figure07L { position: fixed; z-index: 10; bottom: 126px; left: 167px; width: 20px;}
.figure08L { position: fixed; z-index: 10; bottom: -49px; left: 70px; width: 149px;}

.figure01R { position: fixed; z-index: 10; top: -19px; right: -25px; width: 149px;}
.figure02R { position: fixed; z-index: 10; top: 31px; right: -21px; width: 141px;}
.figure03R { position: fixed; z-index: 10; top: 51px; right: -60px; width: 109px;}
.figure04R { position: fixed; z-index: 10; bottom: 64px; right: 42px; width: 111px;}
.figure05R { position: fixed; z-index: 10; bottom: 64px; right: -133px; width: 220px;}
.figure06R { position: fixed; z-index: 10; bottom: 24px; right: -48px; width: 118px;}
.figure07R { position: fixed; z-index: 10; bottom: -74px; right: 130px; width: 149px;}*/

.figure01L { position: fixed; z-index: 10; top: -3.571vw; left: 5.952vw; width: 3.452vw;}
.figure02L { position: fixed; z-index: 10; top: -2.976vw; left: 11.905vw; width: 5.357vw;}
.figure03L { position: fixed; z-index: 10; top: 4.167vw; left: 10.536vw; width: 1.964vw;}
.figure04L { position: fixed; z-index: 10; bottom: 11.071vw; left: 0.357vw; width: 6.488vw;}
.figure05L { position: fixed; z-index: 10; bottom: -2.381vw; left: -8.929vw; width: 16.607vw;}
.figure06L { position: fixed; z-index: 10; bottom: 1.429vw; left: -1.19vw; width: 8.393vw;}
.figure07L { position: fixed; z-index: 10; bottom: 7.5vw; left: 9.94vw; width: 1.19vw;}
.figure08L { position: fixed; z-index: 10; bottom: -2.917vw; left: 4.167vw; width: 8.869vw;}

.figure01R { position: fixed; z-index: 10; top: -1.131vw; right: -1.488vw; width: 8.869vw;}
.figure02R { position: fixed; z-index: 10; top: 1.845vw; right: -1.25vw; width: 8.393vw;}
.figure03R { position: fixed; z-index: 10; top: 3.036vw; right: -3.571vw; width: 6.488vw;}
.figure04R { position: fixed; z-index: 10; bottom: 3.81vw; right: 2.5vw; width: 6.607vw;}
.figure05R { position: fixed; z-index: 10; bottom: 3.81vw; right: -7.917vw; width: 13.095vw;}
.figure06R { position: fixed; z-index: 10; bottom: 1.429vw; right: -2.857vw; width: 7.024vw;}
.figure07R { position: fixed; z-index: 10; bottom: -4.405vw; right: 7.738vw; width: 8.869vw;}



/*wrapL*/
.wrap .wrapL { order: 1; width: calc( (100% - 490px) / 2 ); padding: 65px 0 65px 65px; position: relative;}
.wrap .wrapL .inner { background: #fff; width: calc( (100% - 490px) / 2 - 65px ); height: calc(100vh - 130px); border-radius: 70px 0 0 70px; display: flex; align-items: center; justify-content: center; position: fixed; top: 65px; left: 65px;}
.wrap .wrapL .inner .box { width: 288px;}
.wrap .wrapL .inner .box .logo { width: 100%; margin-bottom: 20px;}
.wrap .wrapL .inner .box .link { width: 240px; margin: 0 auto 20px;}
.wrap .wrapL .inner .box .link a { display: block; width: 100%; height: 50px; border: solid 2px #000; border-radius: 50px; align-content: center; text-align: center; position: relative; font-size: 20px; padding-right: 20px;}
.wrap .wrapL .inner .box .link a::after { content: ""; width: 29px; height: 25px; background: url("../images/com/icon_arrow.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; right: 30px; margin: auto 0; transition: ease .5s;}
.wrap .wrapL .inner .box .link a:hover { background: #CCC;}
.wrap .wrapL .inner .box .link a:hover::after { content: ""; position: absolute; top: 0; bottom: 0; right: 20px; margin: auto 0; transition: ease .5s;}
.wrap .wrapL .inner .box .sns { display: flex; justify-content: center; width: 100%; height: 40px;}
.wrap .wrapL .inner .box .sns a { display: block; height: 40px; margin: 0 10px;}
.wrap .wrapL .inner .box .sns a:nth-of-type(1) { width: 58px;}
.wrap .wrapL .inner .box .sns a:nth-of-type(2) { width: 40px;}

/*wrapR*/
.wrap .wrapR { order: 3; width: calc( (100% - 490px) /2);  padding: 65px 65px 65px 0; position: relative;}
.wrap .wrapR .inner { background: #fff; width: calc( (100% - 490px) / 2 - 65px ); height: calc(100vh - 130px); border-radius: 0 70px 70px 0; display: flex; align-items: center; justify-content: center; position: fixed; top: 65px; right: 65px;}
.wrap .wrapR .inner ul {}
.wrap .wrapR .inner ul li { width: 220px; margin-top: 10px;}
.wrap .wrapR .inner ul li:nth-of-type(1) { margin-top: 0;}
.wrap .wrapR .inner ul li a { display: block; width: 100%; height: 60px; align-content: center; text-align: center; border: solid 2px #000; color: #FFF;}
.wrap .wrapR .inner ul li a::before { content: attr(data-en); display: block; font-size: 20px; line-height: 1.2; font-weight: 900;}

.wrap .wrapR .inner ul li:nth-of-type(1) a,
.wrap .wrapR .inner ul li:nth-of-type(2) a,
.wrap .wrapR .inner ul li:nth-of-type(3) a,
.wrap .wrapR .inner ul li:nth-of-type(4) a,
.wrap .wrapR .inner ul li:nth-of-type(6) a { font-size: 10px;}

.wrap .wrapR .inner ul li:nth-of-type(5) a { font-size: 15px; font-weight: 900;}
.wrap .wrapR .inner ul li:nth-of-type(7) a,
.wrap .wrapR .inner ul li:nth-of-type(8) a,
.wrap .wrapR .inner ul li:nth-of-type(9) a { font-size: 20px; font-weight: 900;}

.wrap .wrapR .inner ul li:nth-of-type(2) a::before { transform: scaleX(95%);}

.wrap .wrapR .inner ul li:nth-of-type(9) { margin-top: 48px; position: relative;}
.wrap .wrapR .inner ul li:nth-of-type(9)::before { content: ""; position: absolute; top: -24px; border-top: dotted 2px #000; display: block; width: 100%;}

.wrap .wrapR .inner ul li:nth-of-type(1) a { background: #faef42; color: #004892;}
.wrap .wrapR .inner ul li:nth-of-type(2) a { background: #00b9ef;}
.wrap .wrapR .inner ul li:nth-of-type(3) a { background: #f3994f;}
.wrap .wrapR .inner ul li:nth-of-type(4) a { background: #f19db5;}
.wrap .wrapR .inner ul li:nth-of-type(5) a { background: #a688bd;}
.wrap .wrapR .inner ul li:nth-of-type(6) a { background: #ec6d74;}
.wrap .wrapR .inner ul li:nth-of-type(7) a { background: #5554a1;}
.wrap .wrapR .inner ul li:nth-of-type(8) a { background: #80cce6;}
.wrap .wrapR .inner ul li:nth-of-type(9) a { background: #000000; color: #faef42;}

.wrap .wrapR .inner ul li a:hover { opacity: 0.4;}


/*smart*/
.wrap .smart { order: 2; background: #FFF; min-width: 490px; width: 490px; overflow: hidden; min-height: 100vh; /*box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.45);*/ position: relative; z-index: 1000;}
.wrap .smart header { width: 100%; height: 60px; position: relative;}
.wrap .smart header .logo { height: 60px; align-content: center; padding: 0 24px; width: 194px;}
.wrap .smart header .hamburger { position: absolute; top: 0; right: 0;}
.wrap .smart header .hamburger a { display: block; width: 60px; height: 60px; background: #003893; position: relative; cursor: pointer;}
.wrap .smart header .hamburger a span { position: absolute; left: 10px; right: 10px; height: 2px; background: #FFF; transform-origin: 50% 50%;}
.wrap .smart header .hamburger a span:nth-of-type(1) { top: 15px;}
.wrap .smart header .hamburger a span:nth-of-type(2) { top: calc(50% - 1px);}
.wrap .smart header .hamburger a span:nth-of-type(3) { bottom: 15px;}
.wrap .smart header .hamburger { display: none;}


.wrap .smart .sec_entry { background: url("../images/com/bg_entry.png") 0 0; padding: 50px 0;}
.wrap .smart .sec_entry .inner {}
.wrap .smart .sec_entry .inner h2 { text-align: center; font-size: 43px; color: #FFF; margin-bottom: 20px;}
.wrap .smart .sec_entry .inner p { text-align: center; font-size: 17px; color: #FFF; margin-bottom: 10px;}
.wrap .smart .sec_entry .inner ul { margin: 0 auto 50px;}
.wrap .smart .sec_entry .inner ul:nth-of-type(2) { margin-bottom: 0;}
.wrap .smart .sec_entry .inner ul li { width: 418px; margin: 26px auto 0;}
.wrap .smart .sec_entry .inner ul li:nth-of-type(1) { margin-top: 0;}
.wrap .smart .sec_entry .inner ul li a { width: 100%; background: #FFF; display: block; text-align: center; align-content: center;}
.wrap .smart .sec_entry .inner ul li.career a { background: #00b9ef; color: #FFF; font-size: 30px; margin-top: 40px; height: 120px;}
.wrap .smart .sec_entry .inner ul li a:hover { opacity: 0.6;}

.wrap .smart footer { background: #FFF; padding: 35px 0 60px;}
.wrap .smart footer h2 { width: 194px; margin: 0 auto 10px;}
.wrap .smart footer p { font-size: 12px; margin-bottom: 20px; text-align: center;}
.wrap .smart footer ul {}
.wrap .smart footer ul li { width: 320px; margin: 20px auto 0;}
.wrap .smart footer ul li:nth-of-type(1) { margin-top: 0;}
.wrap .smart footer ul li a { display: block; width: 100%; height: 50px; border: solid 2px #003893; border-radius: 50px; align-content: center; text-align: center; position: relative; font-size: 20px; color: #003893;}
.wrap .smart footer ul li:nth-of-type(1) a { padding-right: 20px;}
.wrap .smart footer ul li:nth-of-type(1) a::after { content: ""; width: 29px; height: 25px; background: url("../images/com/icon_fot_arrow.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; right: 60px; margin: auto 0; transition: ease .5s;}
.wrap .smart footer ul li:nth-of-type(2) a { padding-left: 20px;}
.wrap .smart footer ul li:nth-of-type(2) a::after { content: ""; width: 37px; height: 29px; background: url("../images/com/icon_fot_mail.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; left: 70px; margin: auto 0; transition: ease .5s;}
.wrap .smart footer ul li a:hover { background: #99afd4;}
.wrap .smart footer ul li:nth-of-type(1) a:hover::after { right: 50px;}

.sp_nav { display: none;}


}





/*PC*/
@media print, screen and (min-width: 769px) and ( max-width: 1679px) {

html {}
body { margin: 0; padding: 0; color: var(--color98);}


.pc { display: block;}
.pcBr { display: inline-block;}
.sp { display: none;}
.spBr { display: none;}

/*-------------------------------------*/

.wrap { width: 100%; min-height: 100vh; display: flex; background: url("../images/com/bg.png") 0 0; background-attachment: fixed;}

/*figure*/
/*.figure01L { position: fixed; z-index: 10; top: -60px; left: 100px; width: 58px;}
.figure02L { position: fixed; z-index: 10; top: -50px; left: 200px; width: 90px;}
.figure03L { position: fixed; z-index: 10; top: 70px; left: 177px; width: 33px;}
.figure04L { position: fixed; z-index: 10; bottom: 186px; left: 6px; width: 109px;}
.figure05L { position: fixed; z-index: 10; bottom: -40px; left: -150px; width: 279px;}
.figure06L { position: fixed; z-index: 10; bottom: 24px; left: -20px; width: 141px;}
.figure07L { position: fixed; z-index: 10; bottom: 126px; left: 167px; width: 20px;}
.figure08L { position: fixed; z-index: 10; bottom: -49px; left: 70px; width: 149px;}

.figure01R { position: fixed; z-index: 10; top: -19px; right: -25px; width: 149px;}
.figure02R { position: fixed; z-index: 10; top: 31px; right: -21px; width: 141px;}
.figure03R { position: fixed; z-index: 10; top: 51px; right: -60px; width: 109px;}
.figure04R { position: fixed; z-index: 10; bottom: 64px; right: 42px; width: 111px;}
.figure05R { position: fixed; z-index: 10; bottom: 64px; right: -133px; width: 220px;}
.figure06R { position: fixed; z-index: 10; bottom: 24px; right: -48px; width: 118px;}
.figure07R { position: fixed; z-index: 10; bottom: -74px; right: 130px; width: 149px;}*/

.figure01L { position: fixed; z-index: 10; top: -3.571vw; left: 5.952vw; width: 3.452vw;}
.figure02L { position: fixed; z-index: 10; top: -2.976vw; left: 11.905vw; width: 5.357vw;}
.figure03L { position: fixed; z-index: 10; top: 4.167vw; left: 10.536vw; width: 1.964vw;}
.figure04L { position: fixed; z-index: 10; bottom: 11.071vw; left: 0.357vw; width: 6.488vw;}
.figure05L { position: fixed; z-index: 10; bottom: -2.381vw; left: -8.929vw; width: 16.607vw;}
.figure06L { position: fixed; z-index: 10; bottom: 1.429vw; left: -1.19vw; width: 8.393vw;}
.figure07L { position: fixed; z-index: 10; bottom: 7.5vw; left: 9.94vw; width: 1.19vw;}
.figure08L { position: fixed; z-index: 10; bottom: -2.917vw; left: 4.167vw; width: 8.869vw;}

.figure01R { position: fixed; z-index: 10; top: -1.131vw; right: -1.488vw; width: 8.869vw;}
.figure02R { position: fixed; z-index: 10; top: 1.845vw; right: -1.25vw; width: 8.393vw;}
.figure03R { position: fixed; z-index: 10; top: 3.036vw; right: -3.571vw; width: 6.488vw;}
.figure04R { position: fixed; z-index: 10; bottom: 3.81vw; right: 2.5vw; width: 6.607vw;}
.figure05R { position: fixed; z-index: 10; bottom: 3.81vw; right: -7.917vw; width: 13.095vw;}
.figure06R { position: fixed; z-index: 10; bottom: 1.429vw; right: -2.857vw; width: 7.024vw;}
.figure07R { position: fixed; z-index: 10; bottom: -4.405vw; right: 7.738vw; width: 8.869vw;}

/*wrapL*/
.wrap .wrapL { order: 1; width: calc( (100% - 490px) / 2 ); padding: 3.869vw 0 3.869vw 3.869vw; position: relative;}
.wrap .wrapL .inner { background: #fff; width: calc( (100% - 490px) / 2 - 3.869vw ); height: calc(100vh - 7.738vw); border-radius: 4.167vw 0 0 4.167vw; display: flex; align-items: center; justify-content: center; position: fixed; top: 3.869vw; left: 3.869vw;}
.wrap .wrapL .inner .box { width: 17.143vw;}
.wrap .wrapL .inner .box .logo { width: 100%; margin-bottom: 1.19vw;}
.wrap .wrapL .inner .box .link { width: 14.286vw; margin: 0 auto 20px;}
.wrap .wrapL .inner .box .link a { display: block; width: 100%; height: 2.976vw; border: solid 2px #000; border-radius: 2.976vw; align-content: center; text-align: center; position: relative; font-size: 1.19vw; padding-right: 1.19vw;}
.wrap .wrapL .inner .box .link a::after { content: ""; width: 1.726vw; height: 1.488vw; background: url("../images/com/icon_arrow.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; right: 1.786vw; margin: auto 0; transition: ease .5s;}
.wrap .wrapL .inner .box .link a:hover { background: #CCC;}
.wrap .wrapL .inner .box .link a:hover::after { content: ""; position: absolute; top: 0; bottom: 0; right: 1.19vw; margin: auto 0; transition: ease .5s;}
.wrap .wrapL .inner .box .sns { display: flex; justify-content: center; width: 100%; height: 2.381vw;}
.wrap .wrapL .inner .box .sns a { display: block; height: 2.381vw; margin: 0 0.595vw;}
.wrap .wrapL .inner .box .sns a:nth-of-type(1) { width: 3.452vw;}
.wrap .wrapL .inner .box .sns a:nth-of-type(2) { width: 2.381vw;}

/*wrapR*/
.wrap .wrapR { order: 3; width: calc( (100% - 490px) /2);  padding: 3.869vw 3.869vw 3.869vw 0; position: relative;}
.wrap .wrapR .inner { background: #fff; width: calc( (100% - 490px) / 2 - 3.869vw ); height: calc(100vh - 7.738vw); border-radius: 0 4.167vw 4.167vw 0; display: flex; align-items: center; justify-content: center; position: fixed; top: 3.869vw; right: 3.869vw;}
.wrap .wrapR .inner ul {}
.wrap .wrapR .inner ul li { width: 13.095vw; margin-top: 0.595vw;}
.wrap .wrapR .inner ul li:nth-of-type(1) { margin-top: 0;}
.wrap .wrapR .inner ul li a { display: block; width: 100%;  height: 3.571vw; align-content: center; text-align: center; border: solid 2px #000; color: #FFF;}
.wrap .wrapR .inner ul li a::before { content: attr(data-en); display: block; font-size: 1.19vw; line-height: 1.2; font-weight: 900;}

.wrap .wrapR .inner ul li:nth-of-type(1) a,
.wrap .wrapR .inner ul li:nth-of-type(2) a,
.wrap .wrapR .inner ul li:nth-of-type(3) a,
.wrap .wrapR .inner ul li:nth-of-type(4) a,
.wrap .wrapR .inner ul li:nth-of-type(6) a { font-size: 0.595vw;}

.wrap .wrapR .inner ul li:nth-of-type(5) a { font-size: 0.893vw; font-weight: 900;}
.wrap .wrapR .inner ul li:nth-of-type(7) a,
.wrap .wrapR .inner ul li:nth-of-type(8) a,
.wrap .wrapR .inner ul li:nth-of-type(9) a { font-size: 1.19vw; font-weight: 900;}

.wrap .wrapR .inner ul li:nth-of-type(2) a::before { transform: scaleX(95%);}

.wrap .wrapR .inner ul li:nth-of-type(9) { margin-top: 2.857vw; position: relative;}
.wrap .wrapR .inner ul li:nth-of-type(9)::before { content: ""; position: absolute; top: -1.429vw; border-top: dotted 2px #000; display: block; width: 100%;}

.wrap .wrapR .inner ul li:nth-of-type(1) a { background: #faef42; color: #004892;}
.wrap .wrapR .inner ul li:nth-of-type(2) a { background: #00b9ef;}
.wrap .wrapR .inner ul li:nth-of-type(3) a { background: #f3994f;}
.wrap .wrapR .inner ul li:nth-of-type(4) a { background: #f19db5;}
.wrap .wrapR .inner ul li:nth-of-type(5) a { background: #a688bd;}
.wrap .wrapR .inner ul li:nth-of-type(6) a { background: #ec6d74;}
.wrap .wrapR .inner ul li:nth-of-type(7) a { background: #5554a1;}
.wrap .wrapR .inner ul li:nth-of-type(8) a { background: #80cce6;}
.wrap .wrapR .inner ul li:nth-of-type(9) a { background: #000000; color: #faef42;}

.wrap .wrapR .inner ul li a:hover { opacity: 0.4;}


/*smart*/
.wrap .smart { order: 2; background: #FFF; width: 490px; min-width: 490px; overflow: hidden; min-height: 100vh; position: relative; z-index: 1000;}
.wrap .smart header { width: 100%; height: 60px; position: relative; z-index: 100;}
.wrap .smart header .logo { height: 60px; align-content: center; padding: 0 24px; width: 194px;}
.wrap .smart header .hamburger { position: absolute; top: 0; right: 0;}
.wrap .smart header .hamburger a { display: block; width: 60px; height: 60px; background: #003893; position: relative; cursor: pointer;}
.wrap .smart header .hamburger a span { position: absolute; left: 10px; right: 10px; height: 2px; background: #FFF; transform-origin: 50% 50%;}
.wrap .smart header .hamburger a span:nth-of-type(1) { top: 15px;}
.wrap .smart header .hamburger a span:nth-of-type(2) { top: calc(50% - 1px);}
.wrap .smart header .hamburger a span:nth-of-type(3) { bottom: 15px;}
.wrap .smart header .hamburger { display: none;}


.wrap .smart .sec_entry { background: url("../images/com/bg_entry.png") 0 0; padding: 50px 0;}
.wrap .smart .sec_entry .inner {}
.wrap .smart .sec_entry .inner h2 { text-align: center; font-size: 43px; color: #FFF; margin-bottom: 20px;}
.wrap .smart .sec_entry .inner p { text-align: center; font-size: 17px; color: #FFF; margin-bottom: 10px;}
.wrap .smart .sec_entry .inner ul { margin: 0 auto 50px;}
.wrap .smart .sec_entry .inner ul:nth-of-type(2) { margin-bottom: 0;}
.wrap .smart .sec_entry .inner ul li { width: 418px; margin: 26px auto 0;}
.wrap .smart .sec_entry .inner ul li:nth-of-type(1) { margin-top: 0;}
.wrap .smart .sec_entry .inner ul li a { width: 100%; background: #FFF; display: block; text-align: center; align-content: center;}
.wrap .smart .sec_entry .inner ul li.career a { background: #00b9ef; color: #FFF; font-size: 30px; margin-top: 40px; height: 120px;}
.wrap .smart .sec_entry .inner ul li a:hover { opacity: 0.6;}

.wrap .smart footer { background: #FFF; padding: 35px 0 60px;}
.wrap .smart footer h2 { width: 194px; margin: 0 auto 10px;}
.wrap .smart footer p { font-size: 12px; margin-bottom: 20px; text-align: center;}
.wrap .smart footer ul {}
.wrap .smart footer ul li { width: 320px; margin: 20px auto 0;}
.wrap .smart footer ul li:nth-of-type(1) { margin-top: 0;}
.wrap .smart footer ul li a { display: block; width: 100%; height: 50px; border: solid 2px #003893; border-radius: 50px; align-content: center; text-align: center; position: relative; font-size: 20px; color: #003893;}
.wrap .smart footer ul li:nth-of-type(1) a { padding-right: 20px;}
.wrap .smart footer ul li:nth-of-type(1) a::after { content: ""; width: 29px; height: 25px; background: url("../images/com/icon_fot_arrow.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; right: 60px; margin: auto 0; transition: ease .5s;}
.wrap .smart footer ul li:nth-of-type(2) a { padding-left: 20px;}
.wrap .smart footer ul li:nth-of-type(2) a::after { content: ""; width: 37px; height: 29px; background: url("../images/com/icon_fot_mail.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; left: 70px; margin: auto 0; transition: ease .5s;}
.wrap .smart footer ul li a:hover { background: #99afd4;}
.wrap .smart footer ul li:nth-of-type(1) a:hover::after { right: 50px;}

.sp_nav { display: none;}







}





/*sp*/
@media only screen and (max-width: 768px) {

html { scroll-padding-top: 13.021vw;}
body { margin: 0; padding: 0; color: var(--color98);}


.pc { display: none;}
.pcBr { display: none;}
.sp { display: block;}
.spBr { display: inline-block;}


.wrap { width: 100%; min-height: 100vh; display: flex; background: url("../images/com/bg.png") 0 0; background-attachment: fixed;}

/*wrapL*/
.wrap .wrapL { display: none;}

/*wrapR*/
.wrap .wrapR { display: none;}


/*smart*/
.wrap .smart { background: #FFF; min-width: 100%; width: 100%; overflow: hidden; min-height: 100vh; position: relative; z-index: 1000;}
.wrap .smart header { width: 100%; height: 12.245vw; position: relative; z-index: 100;}
.wrap .smart header .logo { height: 12.245vw; align-content: center; padding: 0 4.898vw; width: 39.592vw;}
.wrap .smart header .hamburger { position: absolute; top: 0; right: 0;}
.wrap .smart header .hamburger a { display: block; width: 12.245vw; height: 12.245vw; background: #003893; position: relative; cursor: pointer;}
.wrap .smart header .hamburger a span { position: absolute; left: 2.041vw; right: 2.041vw; height: 2px; background: #FFF; transform-origin: 50% 50%; transition: ease .2s;}
.wrap .smart header .hamburger a span:nth-of-type(1) { top: 3.061vw;}
.wrap .smart header .hamburger a span:nth-of-type(2) { top: calc(50% - 1px);}
.wrap .smart header .hamburger a span:nth-of-type(3) { bottom: 3.061vw;}

.wrap .smart header .hamburger { position: absolute; top: 0; right: 0; z-index: 500;}
.wrap .smart header .hamburger a.active { display: block; width: 12.245vw; height: 12.245vw; background: #003893; position: relative; cursor: pointer; transition: ease .5s;}
.wrap .smart header .hamburger a.active span { position: absolute; left: 2.041vw; right: 2.041vw; height: 2px; background: #FFF; transform-origin: 50% 50%; transition: ease .2s;}
.wrap .smart header .hamburger a.active span:nth-of-type(1) { top: 5.918vw; transform: rotate(30deg);}
.wrap .smart header .hamburger a.active span:nth-of-type(2) { top: calc( 50% - 1px); transform: translateX(-100%); opacity: 0;}
.wrap .smart header .hamburger a.active span:nth-of-type(3) { bottom: 5.918vw; transform: rotate(-30deg);}


.sp_nav { display: block; width: 100%; height: 100vh; background: #000; transform: translateY(-100%); position: fixed; top: 0; left: 0; z-index: 5000; opacity: 0; transition: ease .5s;}
.sp_nav.active { display: block; width: 100%; height: 100vh; background: #FFF; transform: translateY(0%); position: fixed; top: 0; left: 0; z-index: 5000; opacity: 1; transition: ease .5s;}
.sp_nav header { width: 100%; height: 12.245vw; position: relative;}
.sp_nav header .logo { height: 12.245vw; align-content: center; padding: 0 4.898vw; width: 39.592vw;}
.sp_nav header .hamburger { position: absolute; top: 0; right: 0; z-index: 5100;}
.sp_nav header .hamburger a { display: block; width: 12.245vw; height: 12.245vw; background: #003893; position: relative; cursor: pointer; transition: ease .5s;}
.sp_nav header .hamburger a span { position: absolute; left: 2.041vw; right: 2.041vw; height: 0.408vw; background: #FFF; transform-origin: 50% 50%; transition: ease .2s;}
.sp_nav header .hamburger a span:nth-of-type(1) { top: 5.918vw; transform: rotate(30deg);}
.sp_nav header .hamburger a span:nth-of-type(2) { top: calc( 50% - 0.408vw); transform: translateX(-100%); opacity: 0;}
.sp_nav header .hamburger a span:nth-of-type(3) { bottom: 5.918vw; transform: rotate(-30deg);}

.sp_nav ul { padding: 4.082vw 6.122vw 0;}
.sp_nav ul li { width: 100%; height: 16.327vw; border-bottom: dotted 2px #000; padding: 0 12.245vw;}
.sp_nav ul li:nth-of-type(9) { border-bottom: none;}
.sp_nav ul li a { display: block; width: 100%; height: 100%; align-content: center; color: #004892;}
.sp_nav ul li a::before { content: attr(data-en); display: block; font-size: 4.082vw; line-height: 1.2; font-weight: 900;}

.sp_nav ul li:nth-of-type(1) a,
.sp_nav ul li:nth-of-type(2) a,
.sp_nav ul li:nth-of-type(3) a,
.sp_nav ul li:nth-of-type(4) a,
.sp_nav ul li:nth-of-type(6) a { font-size: 2.041vw;}

.sp_nav ul li:nth-of-type(5) a { font-size: 3.061vw; font-weight: 900;}
.sp_nav ul li:nth-of-type(7) a,
.sp_nav ul li:nth-of-type(8) a,
.sp_nav ul li:nth-of-type(9) a { font-size: 4.082vw; font-weight: 900;}

/*.sp_nav ul li:nth-of-type(2) a::before { transform: scaleX(95%);}*/

.sp_nav ul li a:hover { opacity: 0.4;}


.wrap .smart .sec_entry { background: url("../images/com/bg_entry.png") 0 0; padding: 10.204vw 0;}
.wrap .smart .sec_entry .inner {}
.wrap .smart .sec_entry .inner h2 { text-align: center; font-size: 8.776vw; color: #FFF; margin-bottom: 4.082vw;}
.wrap .smart .sec_entry .inner p { text-align: center; font-size: 3.469vw; color: #FFF; margin-bottom: 2.041vw;}
.wrap .smart .sec_entry .inner ul { margin: 0 auto 50px;}
.wrap .smart .sec_entry .inner ul:nth-of-type(2) { margin-bottom: 0;}
.wrap .smart .sec_entry .inner ul li { width: 85.306vw; margin: 26px auto 0;}
.wrap .smart .sec_entry .inner ul li:nth-of-type(1) { margin-top: 0;}
.wrap .smart .sec_entry .inner ul li a { width: 100%; background: #FFF; display: block; text-align: center; align-content: center;}
.wrap .smart .sec_entry .inner ul li.career a { background: #00b9ef; color: #FFF; font-size: 6.122vw; margin-top: 8.163vw; height: 24.49vw;}
.wrap .smart .sec_entry .inner ul li a:hover { opacity: 0.6;}

.wrap .smart footer { background: #FFF; padding: 7.143vw 0;}
.wrap .smart footer h2 { width: 39.592vw; margin: 0 auto 10px;}
.wrap .smart footer p { font-size: 2.449vw; margin-bottom: 4.082vw; text-align: center;}
.wrap .smart footer ul {}
.wrap .smart footer ul li { width: 65.306vw; margin: 20px auto 0;}
.wrap .smart footer ul li:nth-of-type(1) { margin-top: 0;}
.wrap .smart footer ul li a { display: block; width: 100%; height: 10.204vw; border: solid 2px #003893; border-radius: 10.204vw; align-content: center; text-align: center; position: relative; font-size: 4.082vw; color: #003893;}
.wrap .smart footer ul li:nth-of-type(1) a { padding-right: 4.082vw;}
.wrap .smart footer ul li:nth-of-type(1) a::after { content: ""; width: 5.918vw; height: 5.102vw; background: url("../images/com/icon_fot_arrow.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; right: 12.245vw; margin: auto 0; transition: ease .5s;}
.wrap .smart footer ul li:nth-of-type(2) a { padding-left: 4.082vw;}
.wrap .smart footer ul li:nth-of-type(2) a::after { content: ""; width: 7.551vw; height: 5.918vw; background: url("../images/com/icon_fot_mail.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; left: 14.286vw; margin: auto 0; transition: ease .5s;}
.wrap .smart footer ul li a:hover { background: #99afd4;}
.wrap .smart footer ul li:nth-of-type(1) a:hover::after { right: 10.204vw;}




}





/*sp*/
@media screen and (width: 490px) {

html { scroll-padding-top: 100px;}
body { margin: 0; padding: 0; color: var(--color98);}


.pc { display: none;}
.pcBr { display: none;}
.sp { display: block;}
.spBr { display: inline-block;}


.wrap { width: 100%; min-height: 100vh; display: flex; background: url("../images/com/bg.png") 0 0; background-attachment: fixed;}

/*wrapL*/
.wrap .wrapL { display: none;}

/*wrapR*/
.wrap .wrapR { display: none;}


/*smart*/
.wrap .smart { background: #FFF; min-width: 490px; width: 490px; overflow: hidden; min-height: 100vh; box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.45); position: relative; z-index: 1000;}
.wrap .smart header { width: 100%; height: 60px; position: relative; z-index: 100;}
.wrap .smart header .logo { height: 60px; align-content: center; padding: 0 24px; width: 194px;}
.wrap .smart header .hamburger { position: absolute; top: 0; right: 0;}
.wrap .smart header .hamburger a { display: block; width: 60px; height: 60px; background: #003893; position: relative; cursor: pointer;}
.wrap .smart header .hamburger a span { position: absolute; left: 10px; right: 10px; height: 2px; background: #FFF; transform-origin: 50% 50%; transition: ease .2s;}
.wrap .smart header .hamburger a span:nth-of-type(1) { top: 15px;}
.wrap .smart header .hamburger a span:nth-of-type(2) { top: calc(50% - 1px);}
.wrap .smart header .hamburger a span:nth-of-type(3) { bottom: 15px;}

.wrap .smart header .hamburger { position: absolute; top: 0; right: 0; z-index: 5100;}
.wrap .smart header .hamburger a.active { display: block; width: 60px; height: 60px; background: #003893; position: relative; cursor: pointer; transition: ease .5s;}
.wrap .smart header .hamburger a.active span { position: absolute; left: 10px; right: 10px; height: 2px; background: #FFF; transform-origin: 50% 50%; transition: ease .2s;}
.wrap .smart header .hamburger a.active span:nth-of-type(1) { top: 29px; transform: rotate(30deg);}
.wrap .smart header .hamburger a.active span:nth-of-type(2) { top: calc( 50% - 2px); transform: translateX(-100%); opacity: 0;}
.wrap .smart header .hamburger a.active span:nth-of-type(3) { bottom: 29px; transform: rotate(-30deg);}


.sp_nav { display: block; width: 100%; height: 100vh; background: #000; transform: translateY(-100%); position: fixed; top: 0; left: 0; z-index: 5000; opacity: 0; transition: ease .5s;}
.sp_nav.active { display: block; width: 100%; height: 100vh; background: #FFF; transform: translateY(0%); position: fixed; top: 0; left: 0; z-index: 5000; opacity: 1; transition: ease .5s;}
.sp_nav header { width: 100%; height: 60px; position: relative;}
.sp_nav header .logo { height: 60px; align-content: center; padding: 0 24px; width: 194px;}
.sp_nav header .hamburger { position: absolute; top: 0; right: 0; z-index: 5100;}
.sp_nav header .hamburger a { display: block; width: 60px; height: 60px; background: #003893; position: relative; cursor: pointer; transition: ease .5s;}
.sp_nav header .hamburger a span { position: absolute; left: 10px; right: 10px; height: 2px; background: #FFF; transform-origin: 50% 50%; transition: ease .2s;}
.sp_nav header .hamburger a span:nth-of-type(1) { top: 29px; transform: rotate(30deg);}
.sp_nav header .hamburger a span:nth-of-type(2) { top: calc( 50% - 2px); transform: translateX(-100%); opacity: 0;}
.sp_nav header .hamburger a span:nth-of-type(3) { bottom: 29px; transform: rotate(-30deg);}

.sp_nav ul { padding: 20px 30px 0;}
.sp_nav ul li { width: 100%; height: 80px; border-bottom: dotted 2px #000; padding: 0 60px;}
.sp_nav ul li:nth-of-type(9) { border-bottom: none;}
.sp_nav ul li a { display: block; width: 100%; height: 100%; align-content: center; color: #004892;}
.sp_nav ul li a::before { content: attr(data-en); display: block; font-size: 20px; line-height: 1.2; font-weight: 900;}

.sp_nav ul li:nth-of-type(1) a,
.sp_nav ul li:nth-of-type(2) a,
.sp_nav ul li:nth-of-type(3) a,
.sp_nav ul li:nth-of-type(4) a,
.sp_nav ul li:nth-of-type(6) a { font-size: 10px;}

.sp_nav ul li:nth-of-type(5) a { font-size: 15px; font-weight: 900;}
.sp_nav ul li:nth-of-type(7) a,
.sp_nav ul li:nth-of-type(8) a,
.sp_nav ul li:nth-of-type(9) a { font-size: 20px; font-weight: 900;}

/*.sp_nav ul li:nth-of-type(2) a::before { transform: scaleX(95%);}*/

.sp_nav ul li a:hover { opacity: 0.4;}


.wrap .smart .sec_entry { background: url("../images/com/bg_entry.png") 0 0; padding: 50px 0;}
.wrap .smart .sec_entry .inner {}
.wrap .smart .sec_entry .inner h2 { text-align: center; font-size: 43px; color: #FFF; margin-bottom: 20px;}
.wrap .smart .sec_entry .inner p { text-align: center; font-size: 17px; color: #FFF; margin-bottom: 10px;}
.wrap .smart .sec_entry .inner ul { margin: 0 auto 50px;}
.wrap .smart .sec_entry .inner ul:nth-of-type(2) { margin-bottom: 0;}
.wrap .smart .sec_entry .inner ul li { width: 418px; margin: 26px auto 0;}
.wrap .smart .sec_entry .inner ul li:nth-of-type(1) { margin-top: 0;}
.wrap .smart .sec_entry .inner ul li a { width: 100%; background: #FFF; display: block; text-align: center; align-content: center;}
.wrap .smart .sec_entry .inner ul li.career a { background: #00b9ef; color: #FFF; font-size: 30px; margin-top: 40px; height: 120px;}
.wrap .smart .sec_entry .inner ul li a:hover { opacity: 0.6;}

.wrap .smart footer { background: #FFF; padding: 35px 0;}
.wrap .smart footer h2 { width: 194px; margin: 0 auto 10px;}
.wrap .smart footer p { font-size: 12px; margin-bottom: 20px; text-align: center;}
.wrap .smart footer ul {}
.wrap .smart footer ul li { width: 320px; margin: 20px auto 0;}
.wrap .smart footer ul li:nth-of-type(1) { margin-top: 0;}
.wrap .smart footer ul li a { display: block; width: 100%; height: 50px; border: solid 2px #003893; border-radius: 50px; align-content: center; text-align: center; position: relative; font-size: 20px; color: #003893;}
.wrap .smart footer ul li:nth-of-type(1) a { padding-right: 20px;}
.wrap .smart footer ul li:nth-of-type(1) a::after { content: ""; width: 29px; height: 25px; background: url("../images/com/icon_fot_arrow.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; right: 60px; margin: auto 0; transition: ease .5s;}
.wrap .smart footer ul li:nth-of-type(2) a { padding-left: 20px;}
.wrap .smart footer ul li:nth-of-type(2) a::after { content: ""; width: 37px; height: 29px; background: url("../images/com/icon_fot_mail.svg") 0 0; background-size: cover; position: absolute; top: 0; bottom: 0; left: 70px; margin: auto 0; transition: ease .5s;}
.wrap .smart footer ul li a:hover { background: #99afd4;}
.wrap .smart footer ul li:nth-of-type(1) a:hover::after { right: 50px;}




}