@charset "utf-8";
/* CSS Document */
.img{ position: relative; overflow: hidden; }
.img img{ width: 100%; height: 100%;}
img{max-width: 100%; max-height: 100%;}
.http_tt{ display: flex; align-items: center; margin-bottom: 2.8125rem;}
.http_tt.left{ justify-content: flex-start; }
.http_tt.left img:nth-child(1){ display: none;}
.http_tt.left img:nth-child(3){ margin-right: 0;} 
.http_tt.center{ justify-content: center; }
.http_tt.right{ justify-content: flex-end; }
.http_tt.right img:nth-child(3){ display: none;}
.http_tt.left img:nth-child(1){ margin-left: 0;} 
.http_tt h3{font-size: 1.65rem; color: #3e3e3e; font-weight: bold;}
.http_tt img{ margin: 0 3.75rem; width: 6.125rem; }
.pad_top{ padding-top: 5.875rem;}
.pad_bot{ padding-bottom: 4.875rem;}
.n_http01{ width: 100%; overflow: hidden; background: url(../images/http_bg01.jpg) center no-repeat; background-size: cover; }
.n_http01 .con{ font-size: .875rem; line-height: 1.5rem; color: #6e6f74; text-align: center; max-width: 925px; margin: 0 auto 3.75rem;}
.n_http01 ul{ display: flex; margin: 0 -13px;}
.n_http01 ul li{ width: 33.333%; text-align: center; padding: 0 13px;}
.n_http01 ul li .box{ background: #fff; padding: 4rem 2rem; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; }
.n_http01 ul li .ico{ margin-bottom: 12px;}
.n_http01 ul li h4{ font-size: 1.05rem; color: #3a3b3c; line-height: 2.0rem; max-width: 258px; margin: 0 auto; }

.n_http01 ul li:nth-child(1) .box{ border-radius: 0 50px 0 50px; -webkit-border-radius: 0 50px 0 50px; -moz-border-radius: 0 50px 0 50px; -ms-border-radius: 0 50px 0 50px; -o-border-radius: 0 50px 0 50px; }
.n_http01 ul li:nth-child(2) .box{ border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; }
.n_http01 ul li:nth-child(3) .box{ border-radius: 50px 0 50px 0; -webkit-border-radius: 50px 0 50px 0; -moz-border-radius: 50px 0 50px 0; -ms-border-radius: 50px 0 50px 0; -o-border-radius: 50px 0 50px 0; }

.n_http01 ul li:hover .box{ box-shadow: 4.686px 16.341px 82.65px 12.35px rgba(157, 167, 188, 0.31);}

.n_http02{ width: 100%; overflow: hidden;}
.n_http02 ul{ margin: -2rem -2.5rem;}
.n_http02 ul li{}
.n_http02 ul li .box{ display: flex; align-items: center;}
.n_http02 ul li .img{ width: 47.14%; flex-shrink: 0; margin: 2rem 2.5rem;}
.n_http02 ul li .img img{}
.n_http02 ul li .txt{ margin: 2rem 2.5rem; flex-grow: 1;}
.n_http02 ul li .txt .con{ font-size: .875rem; line-height: 1.5rem; color: #747474;}
.n_http02 ul li .txt .con p{ margin-bottom: 1.5rem;}
.n_http02 ul li .txt .con h4{ font-size: 1.125rem; color: #e62129; font-weight: bold;}
.n_http02 ul li:nth-child(even) .box{ flex-direction: row-reverse;}
.n_http02 ul li:nth-child(even) .http_tt{ justify-content: flex-end;}
.n_http02 ul li:nth-child(even) .http_tt img:nth-child(3){ display: none;}
.n_http02 ul li:nth-child(even) .http_tt img:nth-child(1){ margin-left: 0;}
.n_http02 ul li:nth-child(odd) .http_tt{ justify-content: flex-start;}
.n_http02 ul li:nth-child(odd) .http_tt img:nth-child(1){ display: none;}
.n_http02 ul li:nth-child(odd) .http_tt img:nth-child(3){ margin-right: 0;}

.n_http_ys{ width: 100%; overflow: hidden; text-align: center; background: #f2f6ff;}
.n_http_ys ul{ display: flex; margin: -1rem;}
.n_http_ys ul li{ width: 33.333%; padding: 1rem;}
.n_http_ys ul li .box{ border-radius: 6px; overflow: hidden; background: #fff; height: 100%; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; }
.n_http_ys ul li .box .img{ border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -ms-border-radius: 6px 6px 0 0; -o-border-radius: 6px 6px 0 0; }
.n_http_ys ul li .box .img img{}
.n_http_ys ul li .box .txt{ text-align: center; padding: 2.8125rem 1.5rem;}
.n_http_ys ul li .box .txt h5{ font-size: 1.5rem; color: #010101; margin-bottom: 1.125rem;}
.n_http_ys ul li .box .txt p{ font-size: .875rem; line-height: 1.5rem; color: #747474; text-align: left; height: 4.5rem;}

.n_email01{}
.n_email01 ul{ display: flex; justify-content: space-around;}
.n_email01 ul li{ text-align: center; max-width: 223px; margin: 0 1rem;  }
.n_email01 ul li .box{}
.n_email01 ul li .ico{ margin-bottom: .5rem;}
.n_email01 ul li h5{ margin-bottom: 12px; font-size: 1.125rem; color: #3e3e3e; font-weight: bold;}
.n_email01 ul li p{ font-size: .875rem; line-height: 1.375rem; color: #747474;}

.ico_anim{ display:inline-block; width:8.125rem; height:8.125rem; line-height:8.125rem; -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; margin-bottom:1.25rem; position:relative; overflow:hidden; -moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.ico_anim{ display:inline-block; width:8.125rem; height:8.125rem; position:relative}
.ico_anim span.y1{ position:absolute; top:0; left:0; display:inline-block; width:8.125rem; height:8.125rem; border: #dbdbdb 1px solid; -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; transform: scale(0.7); visibility: hidden; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); }
.ico_anim span.y2{position:absolute;top:0;left:0;display:inline-block;width:8.125rem;height:8.125rem;border: #dbdbdb 1px solid;background:#ffffff;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;opacity: 0;transform: scale(0.7);-webkit-transform: scale(0.7);visibility: hidden;}

.ico_anim .con01{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; -moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.ico_anim .con02{ content:""; position:absolute; left:-100%; top:0; width:100%; height:100%; -moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}



.n_email02{ width: 100%; overflow: hidden; background: url(../images/email_bg02.jpg) center no-repeat; background-size: cover;}
.tt_con{ font-size: .875rem; line-height: 1.5rem; color: #6e6f74; text-align: center; max-width: 925px; margin: -1rem auto 3.75rem;}
.n_email02 ul{ display: flex; flex-flow: wrap; margin: -1.375rem -1.7rem;}
.n_email02 ul li{ width: 33.333%; padding: 1.375rem 1.7rem;}
.n_email02 ul li .box{ border-radius: 4px; border: 2px solid #fff; height: 100%; padding: 2.5rem 2rem 3rem; transition: .5s; background: #f4f8fd; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; }
.n_email02 ul li .tt{ display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem;}
.n_email02 ul li .tt h5{ font-size: 1.25rem; color: #3a3b3c; font-weight: bold;}
.n_email02 ul li .tt img{ max-width: 2.875rem; max-height: 2.875rem; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s; -ms-transition: .8s; -o-transition: .8s; }
.n_email02 ul li p{ font-size: .875rem; color: #585b5e; line-height: 1.5rem; height: 3rem;}
.n_email02 ul li:hover .box{  box-shadow: -1.455px 6.847px 36.8px 3.2px rgba(177, 186, 202, 0.19);}
.n_email02 ul li:hover .tt img{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); }
 .n_email03{}
 .n_email03 ul{ display: flex; flex-flow: wrap;}
 .n_email03 ul li{ width: 33.333%;}
 .n_email03 ul li .box{ padding: 2rem 1.625rem; height: 100%; position: relative; z-index: 1;}
 .n_email03 ul li .tt{ text-align: center; margin-bottom: 2.25rem; padding: 0 3rem; position: sticky; top: 0;}
 .n_email03 ul li .tt .ico{ margin-bottom: 30px; height: 11.4375rem; display: flex; align-items: center; justify-content: center;}
 .n_email03 ul li .tt .ico img{}
 .n_email03 ul li .tt h5{ font-size: 1.375rem; color: #3a3b3c; font-weight: bold; margin-bottom: .5rem;}
 .n_email03 ul li .tt p{ font-size: 1rem; line-height: 1.5rem; height: 3rem;}
 .n_email03 ul li dl{ padding: 1rem 2.25rem;}
 .n_email03 ul li dl+dl{ border-top: 1px dotted #3e3e3e;}
 .n_email03 ul li dt{ font-size: 1.125rem; margin-bottom: .5rem; background: url(../images/ico_lx.svg) left center no-repeat; padding-left: 18px;}
 .n_email03 ul li dd{ font-size: .875rem; color: #8a8990; line-height: 1.125rem;}
 .n_email03 ul li .box:before{ content: ""; display: block; visibility: hidden; box-sizing: border-box; position: absolute; opacity: 0; transition: .5s; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; border: 3px solid #e62129; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; }
 .n_email03 ul li.on .box:before{ opacity: 1; visibility: visible;}

.n_email04{ background: #f2f6ff;} 
.n_email04 ul{ display: flex; flex-flow: wrap;}
.n_email04 ul li{ width: 33.333%;}
.n_email04 ul li .box{ padding: 2rem 1.625rem; position: relative; z-index: 1;height: 100%;}
.n_email04 ul li .tt{ text-align: center; margin-bottom: 2.25rem; padding: 0 3rem; position: sticky; top: 0;}
.n_email04 ul li .tt .ico{ margin-bottom: 30px; height: 11.4375rem; display: flex; align-items: center; justify-content: center;}
.n_email04 ul li .tt .ico img{ mix-blend-mode: multiply;}
.n_email04 ul li .tt h5{ font-size: 1.375rem; color: #3a3b3c; font-weight: bold; margin-bottom: .5rem;}
.n_email04 ul li .tt p{ font-size: .9rem; line-height: 1.5rem; height: 3rem;color:#6e6e6e;}
.n_email04 ul li dl{ padding: 1rem 2.25rem;}
.n_email04 ul li dl+dl{ border-top: 1px dotted #3e3e3e;}
.n_email04 ul li dt{ font-size: 1.125rem; margin-bottom: .5rem; background: url(../images/ico_lx.svg) left center no-repeat; padding-left: 18px;}
.n_email04 ul li dd{ font-size: .875rem; color: #8a8990; line-height: 1.125rem;}
 
.n_email_case{ background: url(../images/email_case_bg.jpg) center bottom no-repeat; background-size: 100% 19rem;}
.n_email_case ul.miso-slider{ margin: 0 -.8125rem; margin-bottom: 5rem;}
.n_email_case ul li{ padding: 0 .8125rem;}
.n_email_case ul li .box{ padding: 2.5rem 1rem; border: 2px solid #f2f6ff; background: #fff; display: flex; justify-content: flex-start; flex-direction: column; align-items: center; text-align: center;}
.n_email_case ul li .pic{ height: 3.75rem; display: flex; align-items: center; justify-content: center;}
.n_email_case ul li .pic img{ max-width: 100%; max-height: 100%;}
.n_email_case ul li h4{ font-size: 1rem; font-weight: bold; color: #3e3e3e; margin-top: 2.25rem; margin-bottom: .75rem;}
.n_email_case ul li p{ font-size: .85rem; color: #74767b; line-height: 1.375rem;}

.n_email_case .miso-arrow{  width: 3rem; margin-top: -2.625rem;
  height: 3rem; 
  background-size: contain !important;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;}
.n_email_case .miso-prev{  background: url(../images/email_left.png) no-repeat; left: -4.6875rem;}
.n_email_case .miso-next{  background: url(../images/email_right.png) no-repeat; right: -4.6875rem;}
.n_email_case .miso-prev:hover{  background: url(../images/email_left_on.png) no-repeat; }
.n_email_case .miso-next:hover{  background: url(../images/email_right_on.png) no-repeat; }

.n_email_case .miso-dots{ bottom: -5rem;}
.n_email_case .miso-dots li{ margin: 0;}
.n_email_case .miso-dots li button{ width: .625rem; height: .625rem; padding: 0;  border: 2px solid #fff;  background: #fff; transition: .5s; border-radius: 50%; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.n_email_case .miso-dots li.miso-active button{ background: none;box-sizing: border-box;}



@media (min-width: 769px)
{
  li:hover .ico_anim span.y1 { opacity: 0; transform: scale(1.3); -webkit-transform: scale(1.3); }
  li:hover .ico_anim span.y2 { opacity: 1; transform: scale(1); -webkit-transform: scale(1); visibility: visible; }
  li:hover .ico_anim .con01{ left:100%;}
  li:hover .ico_anim .con02{ left:0;}
}

@media (max-width: 768px)
{
  .pad_top{ padding-top: 3.5rem !important;}
  .pad_bot{ padding-bottom: 3.5rem !important;}
  .n_email01 ul{ flex-wrap: wrap; margin: 0 7px; margin-top: -2rem;}
  .n_email01 ul li{ width: 50%; margin: 0; margin-top: 2rem; padding: 0 7px;}
  .n_email02 ul{ margin: -5px;}
  .n_email02 ul li{ padding: 5px; width: 50%;}
  .n_email02 ul li:nth-child(1){ width: 100%;}
  .n_email02 ul li .tt h5{ font-size: 1rem;}
  .n_email02 ul li p{ height: auto;}
  .http_tt img{ margin: 0 .75rem;}
  .n_email01 ul li .ico img{ height:4rem;}
  .http_tt h3{ font-size: 1.5rem;}
  .tt_con{ margin-bottom: 2.5rem;}
  .n_http01 ul li h4{ font-size: 1.125rem;}
  .n_http01 ul{ margin: -5px;}
  .n_http01 ul li{ padding: 5px;}
  .n_http01 ul li .ico{ max-width: 5rem; margin: 0 auto; margin-bottom: 1rem;}
  .n_http01 ul li .box{ padding: 3rem 1rem;}
  .n_http02 ul li .box{ flex-direction: column !important;}
  .n_http02 ul{ margin: 0;}
  .n_http02 ul li+li{ margin-top: 2rem;}
  .n_http02 ul li .img{ width: 100%; margin: 0;}
  .n_http02 ul li .txt{ margin: 2rem 0 0;}
  .n_http02 ul li:nth-child(even) .http_tt{ justify-content: flex-start;}
  .n_http02 ul li:nth-child(even) .http_tt img:nth-child(1){ display: none;}
  .n_http02 ul li:nth-child(even) .http_tt img:nth-child(3){ display: block;}
  .http_tt img{ width: 4.25rem;}
  .n_http02 .http_tt{ margin-bottom: 1.5rem;}
  .n_http_ys ul{ margin: 0 -5px;}
  .n_http_ys ul li{ padding: 0 5px;}
  .n_http_ys ul li .box .txt p{ height: auto;}
}

@media (max-width: 480px)
{
  .n_http_ys ul{ flex-flow: wrap; margin-top: -1rem;}
  .n_http_ys ul li{ width: 50%; margin-top: 1rem;}
  .n_http_ys ul li:nth-child(1){ width: 100%; }
  .n_http_ys ul li:nth-child(1) .box{ display: flex; min-width: 0;}
  .n_http_ys ul li:nth-child(1) .img{ flex-shrink: 0; width: calc(50% - 5px);}
  .n_http_ys ul li:nth-child(1) .img img{ object-fit: cover;}
  .n_email02 ul li .tt img{ width: 2rem; max-height: 2rem;}
}