@charset "utf-8";
#background-03 {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #9ed3f1 0%, #ffffff 25%, #ffffff 73%, #ffffff00 100%);
}
#background-04 {
    padding-bottom: 20vh;
}
@media only screen and (max-width:599px) {
#background-04 {
    padding-bottom: 10vh;
}
}



/*
wrap
*/
#wrap {
	min-width: unset;
    position: relative;
}
#wrap #bg-canvas {
	max-width:100%;
	height:100%;
}
#wrap section {
    margin-bottom: 90px;
}
#wrap section .contentbox {
    width: 90%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
#wrap section h2 {
	font-size:2em;
	line-height: 1.7;
}
#wrap section a {
    color: inherit;
}
#wrap section a:hover {
	color:#0074c1;
	border-bottom-color: #0074c1;
}
#wrap section h2 {
    text-align: center;
    line-height: 1.2;
    font-size: 175%;
    letter-spacing: 2px;
    color: #00234e;
}
#wrap section h2 span {
    font-size: 13px;
    color: #a2b2bb;
    letter-spacing: 0.1px;
    font-weight: 200;
    font-style: italic;
}
#wrap section h3 {
	font-size:1.2em;
}
#wrap section p {
    font-size: 1.1em;
}
#wrap section figure {
	width:100%;
}
#wrap section figure img {
	width:100%;
    height: auto;
}
#wrap .pcv {
	display:initial;
}
.br_pc{
    display: block;
}
.br_sp{
    display: none;
}
#wrap #bread {
    margin: 0px auto;
    z-index: 3;
    position: relative;
}
#wrap #bread .body{
    width: 94%;
    max-width: 1280px;
}
#wrap #bread .body a, #wrap #bread .body a:hover {
    color: #0074c1;
}
div#pagetop {
    z-index: 5;
}
.no_event {
    cursor: default;
    pointer-events: none;
}
@media only screen and (max-width:599px) {
#wrap section {
    margin-bottom:30px;
}
#wrap section .contentbox {
    width: 100%;
}
#wrap section h1 {
    font-size:2em;
}	
#wrap section h2 {
    font-size: 1.1em !important;
}
#wrap section h3 {
    font-size:1em;
}	
#wrap section p {
    font-size: 1em;
    text-align: justify;
}
#wrap .pcv {
    display:none;
}	
.br_pc{
    display: none;
}
.br_sp{
    display: block;
}
#header {
    height: 60px;
}
}




/* 
Loading
*/
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 200;
    background-color: #fff;
    font-family: "Noto Sans JP", sans-serif;
}
#loader-bg #loader_sitelogo {
    width: 300px;
	margin: calc(50vh - 125px) auto 0;
}
#loader-bg #loader_sitelogo img {
    width: 100%;
    height: auto;
}
#loading .op_container {
    background-color: #fff;
    width: 300px;
	margin: 0 auto;
}
#loading .op_container .op_inner {
    width: 100%;
}
#loading .op_container .op_text {
    font-size: 27px;
    text-align: center;
    transform: skewX(-15deg);
    font-weight: 200;
    background: rgb(18 63 169);
    background: -webkit-linear-gradient(bottom, rgb(18 63 169) 49%, rgb(0 182 255) 58%, rgb(18 63 169) 70%);
    background: linear-gradient(to bottom, rgb(18 63 169) 49%, rgb(21, 119, 194) 58%, rgb(18 84 169) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.7;
}
#loading .op_container .op_ber {
    background-color: #002c7e;
    margin-top: 5px;
    width: 0%;
    height: 1px;
}
@media only screen and (max-width:599px) {
#loader-bg #loader_sitelogo {
    width: 65%;
}
}



/* fadein */
.fadeIn1500ms {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.1s ease;
  filter: blur(20px);
}
.fadeIn1500ms.active {
  opacity: 1;
  filter: blur(0);
}



/*
page navigation
*/
#page-navi {
    position: sticky;
    top: 32px;
    right: 0px;
    z-index: 3;
    padding: 0px;
    width: 100%;
}
#page-navi ul {
    display: flex;
    justify-content: space-around;
    width: calc(565px + 2%);
    margin: 0 auto;
    letter-spacing: 0.3px;
}
#page-navi ul a {
    display: block;
    width: fit-content;
    padding: 1.8em 0.8em;
    color: #15335a;
    font-size: 100%;
    font-weight: normal;
    text-align: center;
    position: relative;
    text-shadow: 0px 0px 13px white;
    /* mix-blend-mode: difference; */
}
#page-navi ul a:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background: #080d31;
    top: 33px;
    left: calc(50% + -3px);
    width: 6px;
    z-index: -1;
    opacity: 0;
}
#page-navi ul a:hover {
    color: #ffffff;
    transition: all .5s cubic-bezier(0.53, 0.79, 0.18, 1.28);
}
#page-navi ul a:hover::after {
    transition: all .5s cubic-bezier(0.53, 0.79, 0.18, 1.28);
    top: 6px;
    left: calc(50% + -38px);
    width: 76px;
    opacity: 1;
}
@media only screen and (max-width:599px) {
#page-navi {
    top: 42px;
    padding: 15px 0 0;
    background: linear-gradient(180deg, #ffffff00 0%, #ffffff61 53%, #ffffff45 72%, #ffffff0a 100%);
}
#page-navi ul {
    width: calc(100% - 65px);
    margin: 0 auto 0;
    width: 85%;
}
#page-navi ul a {
    font-size: 73%;
    mix-blend-mode: unset;
    padding: 1em 12.1%;
    text-shadow: 0px 0px 3px #fff;
    display: contents;
}
#page-navi ul a:hover {
    color: #859cbe;
}
#page-navi ul a:hover::after {
    content: unset;
}
}




/*
background
*/
#wrap #background-01 {
    position: relative;
    background-image: url(/img/solution/business-design/blur01.png);
    background-size: 100%;
    background-position: left 126%;
    background-repeat: no-repeat;
}
#wrap #bg-canvas {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0;
}
@media only screen and (max-width:1549px) {
#wrap #background-01 {
    background-position: left 95%;
}
}
@media only screen and (max-width:1199px) {
#wrap #background-01 {
    background-position: center 68%;
}
}
@media only screen and (max-width:599px) {
#wrap #bg-canvas {
    top: 45px;
}
}



/*
animation
*/
[data-aos="anime10th-bg2-fadeout"] {
	background-color:rgba(255,255,255,1);
}
[data-aos="anime10th-bg2-fadeout"].aos-animate {
	background-color:rgba(255,255,255,0);
}
[data-aos="anime10th-bg3-fadeout"] {
	background-color:rgba(255,255,255,1);
}
[data-aos="anime10th-bg3-fadeout"].aos-animate {
	background-color:rgba(255,255,255,0);
}






/*
top
*/
#wrap section#top {
    position: relative;
    z-index: 1;
    height: calc(100vh + 170px);
    padding: 0;
    margin: 0em auto -7vh;
    padding: 0;
    background-image: url(/img/solution/business-design/main_bg.jpg);
    background-repeat: no-repeat;
    background-position: left 0px;
    background-size: cover;
    box-shadow: -2px 7px 75px 76px rgb(164 210 238 / 89%);
}
#wrap section#top .contentbox {
    padding: 25vh 4% 1em;
    position: relative;
    width: 92%;
    color: #fff;
    max-width: 1480px;
    text-shadow: #007ac7a1 1px 1px 5px, #007ecd -1px 1px 5px, #007ecd 1px -1px 5px, #007ecd -1px -1px 5px;
}
#top .contentbox {
    opacity: 0;
    transform: translateY(60px);
    transition: all .5s ease .8s;
}
#top.active .contentbox {
    opacity: 1;
    transform: translateY(0);
}
#wrap section#top h1, #wrap section#top p {
    line-height: 1.6;
    font-weight: normal;
    text-align: left;
    letter-spacing: 2.5px;
    width: 615px;
    margin: 0;
}
#wrap section#top h1 span.spv {
    margin-left: 12px;
    display: inline-block;
}
#wrap section#top h1 span.sub {
    display: block;
    font-size: 76%;
    font-weight: lighter;
    letter-spacing: 7px;
    margin: 0.8em auto .6em;
    text-align: center;
    position: relative;
}
#wrap section#top h1 span.sub:before, #wrap section#top h1 span.sub:after {
    content: "";
    position: absolute;
    height: 0.5px;
    width: 95px;
    background-color: #ffffffa3;
    top: 50%;
}
#wrap section#top h1 span.sub:before {
    left: 40px;
}
#wrap section#top h1 span.sub:after {
    right: 40px;
}
#wrap section h1 {
    margin: 0.5vh auto 1.8vh;
    text-align: center;
    display: none;
}
#wrap section h1.tl_pc figure {
    width: 610px;
    margin: 0 auto;
}
#wrap section h1.tl_sp {
    margin: 0.2vh auto 0.5vh;
    font-size: 215%;
    text-align: center;
    display: block;
    letter-spacing: 0.3px;
    font-weight: lighter;
}
#wrap section#top p {
    font-size: 130%;
    letter-spacing: 3.2px;
    line-height: 2.15;
    max-width: 950px;
    margin: 1.9em 0 0 0;
    font-weight: lighter;
    width: 700px;
}
#wrap section#top .logo {
    max-width: 415px;
    margin: 2.3vh auto 0.3em;
    width: 36%;
    filter: drop-shadow(0px 0px 0.2rem rgba(255, 255, 255, 0.7));
    transition-delay: 0.5s;
}
@media only screen and (max-width:599px) {
#wrap section#top {
    margin: 0em auto;
    background-position: 41% 0px;
    box-shadow: -2px -1px 45px 29px rgb(164 210 238 / 72%);
}
#wrap section#top .contentbox {
    padding: 4vh 6% 7em 6%;
    text-shadow: #007ecd57 1px 1px 3px, #007ecd57 -1px 1px 3px, #007ecd57 1px -1px 3px, #007ecd57 -1px -1px 3px;
}
#wrap section#top h1 {
    margin: 16.6vh auto 2.1vh;
    font-size: 180%;
    text-align: center;
    width: auto;
    line-height: 1.9;
}
#wrap section#top h1 span.spv {
    margin: 0 auto;
}
#wrap section#top h1 span.sub {
    letter-spacing: 6px;
    margin: 1.2em auto .9em;
}
#wrap section h1.tl_sp {
    display: block;
}
#wrap section#top h1 span.sub:before, #wrap section#top h1 span.sub:after {
    width: 13%;
}
#wrap section#top h1 span.sub:before {
    left: 0;
}
#wrap section#top h1 span.sub:after {
    right: 0;
}
#wrap section#top .logo {
    position: static;
    width: 75%;
    margin: 0 auto;
    min-width: unset;
}
#wrap section#top p {
    font-size: 105%;
    width: 97%;
    text-align: justify;
    letter-spacing: 1.6px;
    margin: 2.4em auto 0;
}
#wrap section#top p br{
    display: none;
}
}
@media only screen and (max-height:669px) {
#wrap section#top p {
    letter-spacing: 0.5px;
}
}




/*
CTA
*/
#wrap section#cta {
    margin: 0em auto 4em;
    width: 80%;
    border-radius: 21px;
    z-index: 4;
    position: relative;
    background-image: url(/img/solution/business-design/common/cta.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 20px 30px 22px rgb(207 246 255 / 69%);
    padding: 0.5em 0 2em;
    min-width: 1000px;
}
#wrap section#cta > p {
    text-align: center;
    color: #fbff00;
    font-size: 140%;
    letter-spacing: 2px;
    text-shadow: 0 0 rgba(0, 0, 0, 1);
    font-weight: bold;
    margin: 1em auto 1.7em;
}
#wrap section#cta div {
    width: 58%;
    margin: 1.2em auto 0.4em;
    min-width: 770px;
}
#wrap section#cta a {
    width: 42%;
    background: linear-gradient(90deg, #fcff00 0%, #eafe00 73%, #cefc00 100%);
    border-radius: 5px;
    height: 56px;
    display: block;
    display: flex;
    padding: 0.6em 0px 0.4em 0px;
}
#wrap section#cta a:hover {
    box-shadow: -1px 4px 10px 4px rgb(1 30 59 / 68%);
    transition: all .5s ease;
}
#wrap section#cta a:hover img{
    opacity: 1;
}
#wrap section#cta a img {
    width: 34px;
    height: 33px;
    margin: 1px 6%;
}
.c-bnr {
    display: inline-block;
    width: 180px;
    height: 180px;
}
.c-btn, .c-bnr, .c-txt {
    cursor: pointer;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}
.c-bnr.radius {
    transition-duration: .5s;
    opacity: 1;
    border-radius: 50%;
    width: 400px;
    height: 400px;
    background-color: #ffffff00;
    border: 1px solid rgba(18, 63, 169, 0.0) !important;
}
.c-bnr.radius:hover {
    border-radius: 50%;
    opacity: 0.9;
    padding: 0em;
    width: 200px;
    height: 200px;
    background-color: #1440a80f;
    mix-blend-mode: soft-light;
    border: 1px solid rgb(18 63 169 / 18%) !important;
}
#wrap section#cta a p {
    text-align: center;
    color: #021d46;
    font-size: 107%;
    letter-spacing: 0.6px;
    line-height: 1.9;
    width: 85%;
    margin: 0 9% 0 auto;
}
@media only screen and (max-width:599px) {
#wrap section#cta {
    height: auto;
    width: 89%;
    margin-top: -8em;
    padding: 0.2em 0 1em;
    border-radius: 17px;
    min-width: unset;
}
#wrap section#cta > p {
    font-size: 97%;
    letter-spacing: 1.2px;
    margin: 1em auto;
}
#wrap section#cta div {
    display: block;
    min-width: unset;
    margin: 0em auto;
    width: 78%;
}
#wrap section#cta div a {
    width: 100%;
    margin: 1em auto 0.6em;
    height: auto;
}
#wrap section#cta a img {
    width: 30px;
    height: 28px;
    margin: 0px 6%;
}
#wrap section#cta a p {
    font-size: 95%;
    line-height: 1.5;
}
}
/*
cta animation
*/
[data-aos="cta-zoom-out"] {
	transform:scale(1.1);
	opacity:0;
}
[data-aos="cta-zoom-out"].aos-animate {
	transform:scale(1);
	opacity:1;
}




/*
vision
*/
#wrap #vision-title-circle {
    position: absolute;
    width: 1650px;
    border-radius: 50%;
    transform: scale(10);
    height: 1650px !important;
    transition-timing-function: ease;
    transition-delay: 0.02s;
    z-index: 0;
    transition: background-color 1s ease, transform 1s ease;
    border: 1px solid rgb(157 187 219 / 62%);
    margin: 6em auto 0;
    left: calc(50% - 825px) !important;
}
/*修正前
#wrap section#vision {
    padding: 14em 0 26em;
    margin: 9.5em auto 0;
    z-index: 1;
    position: relative;
    overflow: hidden;
}
*/
#wrap section#vision {
    padding: 7em 0 18em;
    margin: 0 auto 0;
    z-index: 1;
    position: relative;
    overflow: hidden;
}
#wrap section#vision .contentbox {
    padding-top: 4em;
}
#wrap section#vision .visionbox01 {
    position: relative;
    padding: 1em 0px 25px;
}
#wrap section#vision .visionbox01 h2 {
    color: #0b3061;
    font-size: 815%;
    color: #dcfaff;
    letter-spacing: -8px;
    font-style: italic;
    margin: 0 auto -1em;
    font-family: "游ゴシック", "UD Shin Go Regular", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background: linear-gradient(180deg, #4801ef2b 0%, #ffffff 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
#wrap section#vision .visionbox01 span {
    color: #b7d1e3;
}
#wrap section#vision .visionbox02 {
    margin: 2em auto 5em;
}
#wrap section#vision .visionbox02 h3 {
    text-align: center;
    margin: -3.3em auto 1.9em;
    font-size: 310%;
    font-weight: normal;
    color: #165fa7;
    font-weight: 200;
}
#wrap section#vision .visionbox02 p {
    text-align: center;
    margin: 0 auto;
    line-height: 2.5;
    max-width: 1150px;
    letter-spacing: 2px;
    font-size: 125%;
    color: #072849;
    margin: 0px auto 2.8em;
    font-weight: bold;
}
@media only screen and (max-width:599px) {
#wrap section#vision .contentbox {
    padding-top: 0em;
}
#wrap section#vision .visionbox02 h3 {
    margin: 1.8em auto 0.9em;
    font-size: 175%;
    line-height: 1.7;
}
}
@media only screen and (max-width:1199px) {
#wrap section#vision .visionbox02 p {
    width: 100%;
}
}
@media only screen and (max-width:599px) {
#wrap #vision-title-circle {
    left: calc(50% - 415px) !important;
    height: 830px !important;
    width: 830px;
    margin: 17em auto 0;
}
#wrap section#vision {
    margin: 0em auto 0;
    padding: 10em 0 13em;
}
#wrap section#vision .visionbox01 h2 {
    font-size: 495% !important;
    margin-top: 2em;
}
#wrap section#vision .visionbox02 p {
    width: 84%;
    font-size: 100%;
    line-height: 2.2;
    text-align: center;
    letter-spacing: 0.5px;
    margin: 0 auto 2em;
}
}

/*
message animation
*/
[data-aos="anime10th-zoom-in"] {
	transform:scale(0.8);
	opacity:0;
}
[data-aos="anime10th-zoom-in"].aos-animate {
	transform:scale(1);
	opacity:1;
}
[data-aos="anime10th-zoom-out"] {
    transform: scale(1.35);
    opacity: 0;
}
[data-aos="anime10th-zoom-out"].aos-animate {
	transform:scale(1);
	opacity:1;
}





/*
new_technology
*/
#wrap section#new_technology {
    position: relative;
    margin-bottom: 0px;
    padding: 7em 0 3em;
    overflow: hidden;
    z-index: 1;
}
#wrap section#new_technology #newtech-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: backdrop-filter .15s linear, background-color .15s linear;
    backdrop-filter: blur(2px);
}
/*articleありの場合
#newtech-height {
    position: relative;
    width: 100%;
    height: 2878px !important;
    margin-bottom: 90vh !important;
    padding-bottom: 6vh;
}
*/
#newtech-height {
    position: relative;
    width: 100%;
    height: 2878px !important;
    margin-bottom: 40vh !important;
    padding-bottom: 6vh;
}
#wrap section#new_technology .newtechbox01 {
    position: relative;
    padding: 60px 0px;
    z-index: 1;
}
#wrap section#new_technology .newtechbox01 h2 {
    color: #003485;
    font-size: 260%;
    font-weight: normal;
    line-height: 1.7;
    margin: 1.5em auto 0.3em;
    font-weight: normal;
    letter-spacing: 3.5px;
}
#wrap section#new_technology .newtechbox01-year { /*Tecnology*/
    position: absolute;
    width: 6em;
    top: calc(50% - 0.95em);
    left: calc(50% - 3em);
    text-align: center;
    font-size: 805%;
    opacity: 0.7;
    font-style: italic;
    color: #68bce5;
    letter-spacing: -8px;
    font-family: "游ゴシック", "UD Shin Go Regular", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    letter-spacing: -8px;
    font-weight: normal;
    background: linear-gradient(180deg, #008ce357 0%, #ffffff 74%, #ffffff 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    mix-blend-mode: difference;
}
#wrap #newtech-title-circle {
    position: absolute;
    top: calc(50% - 340px);
    left: calc(50% - 340px);
    width: 680px;
    height: 680px;
    border-radius: 50%;
    border-width: 1.5px;
    border-style: solid;
    border-color: #99a8b4;
    transition-delay: 0.5s;
    transition-timing-function: ease;
    border-color: #0c379c;
    border-color: #0060b8;
}



#wrap section#new_technology .newtechbox03 {
    width: 92% !important;
    margin: 0 auto 90px;
    min-width: 1220px;
}
#wrap section#new_technology .newtechbox03 .newtechcont {
    width: 100%;
    margin: 0 auto 55px;
}
.newtechcont[data-aos="slide-up"] {
    opacity: 0;
    transform: translateY(80px);
    transition:
        transform 0.8s ease,
        opacity 0.8s ease;
}
.newtechcont[data-aos="slide-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}



#wrap section#new_technology .newtechbox03 .newtechcont figure {
    overflow: hidden;
    border-radius: 12px 12px 15px 15px;
    background: linear-gradient(rgb(227 233 242 / 88%) 10%, rgba(223, 242, 232, 0.65) 60%, rgb(236, 244, 250) 96%, rgb(232, 239, 243) 100%);
    transition-delay: 0.5s;
    width: 42%;
    position: relative;
    z-index: 1;
    box-shadow: 0px 15px 48px 25px rgb(164 210 238 / 72%);
    border: 1px solid #3daaf19c;
}
#wrap section#new_technology .newtechbox03 .newtechcont .tx {
    width: 60%;
    margin: -14em 4% 0 auto;
    box-shadow: 0px 24px 65px 38px rgb(164 210 238 / 72%);
    border-radius: 15px;
    position: relative;
    padding: 1.7em 10% 1.9em;
    background-color: #fff;
    font-size: 105%;
    line-height: 1.9;
    color: #03294e;
    border: 1px solid #abdeff;
    min-width: 720px;
    transition: all .8s ease;
}
#wrap section#new_technology .newtechbox03 .newtechcont .tx:hover {
    box-shadow: 3px 37px 74px 31px rgb(164 190 238 / 72%);
}
#wrap section#new_technology .newtechbox03 .newtechcont h3 {
    font-size: 140%;
    font-weight: bold;
    margin: 1.3em auto 1em;
    text-align: center;
}
#wrap section#new_technology .newtechbox03 .newtechcont h3 span {
    display: block;
    font-size: 13px;
    color: #8399a0;
    letter-spacing: 0.1px;
    font-weight: 200;
    margin: 1.1em auto 0;
    font-style: italic;
}
#wrap section#new_technology .newtechbox03 .newtechcont p {
    font-size: 0.95em;
    text-align: justify;
    color: #333;
}
#wrap section#new_technology .newtechbox03 .newtechcont a {
    display: block;
    width: fit-content;
    margin: 1em auto 0px auto;
    text-align: center;
    position: absolute;
    bottom: 20px;
    right: 80px;
    background: #080d31;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 22px 0;
    color: #fff;
    font-size: 90%;
}
#wrap section#new_technology .newtechbox03 .newtechcont a:hover {
    width: 90px;
    height: 90px;
    padding: 30px 0;
    transition: all 0.3s ease;
    right: 70px;
    bottom: 10px;
    background: #080d31;
    box-shadow: 0px 0px 11px #1f6b88;
}
#wrap section#new_technology .newtechbox03 .newtechcont .application {
    margin: 0 auto;
    min-width: 500px;
    font-size: 95%;
}
#wrap section#new_technology .newtechbox03 .newtechcont .application h3 {
    font-weight: 200;
    font-size: 100%;
    line-height: 1.2;
    border: 1px solid #003f834f;
    border-radius: 50%;
    padding: 36px 0;
    width: 98px;
    height: 97px;
    color: #003f83;
    margin: 1.2em auto 1em 10px;
    font-weight: normal;
}
#wrap section#new_technology .newtechbox03 .newtechcont .application ul {
    margin: 1.7em auto 0 3%;
    width: 75%;
}
#wrap section#new_technology .newtechbox03 .newtechcont .application li {
    font-weight: 600;
    font-size: 103%;
}
@media only screen and (max-width:599px) {
#wrap #newtech-title-circle {
    position: absolute;
    top: calc(50% - 225px);
    left: calc(50% - 225px);
    width: 450px;
    height: 450px;
    border-width: 1px;
    background-color: #ffffffb8;
}
/*
#newtech-height {
    margin: 0em auto 50vh !important;
    height: 4791px !important;
    background: linear-gradient(180deg, #ffffff57 0%, #008ce357 20%, #ffffff94 93%, #ffffff00 100%);
}
*/
#newtech-height {
    margin: 0em auto 50vh !important;
    height: 3401px !important;
    background: linear-gradient(180deg, #ffffff57 0%, #008ce357 20%, #ffffff94 93%, #ffffff00 100%);
}
#wrap section#new_technology .newtechbox01-year {
    font-size: 600%;
    width: 424px;
    left: calc(50% - 228px);
}
#wrap section#new_technology .newtechbox01 h2 {
    font-size: 215%;
}
#wrap section#new_technology .newtechbox03 {
    width: 96% !important;
    margin: 0 2%;
    min-width: unset;
}
#wrap section#new_technology .newtechbox03 .newtechcont {
    width: 100%;
    margin: 0 auto 0.8em;
    border: none;
    box-shadow: unset;
    background: linear-gradient(180deg, #ffffff00 0%, #ffffffe0 44%, #ffffff 83%, #ffffff00 100%);
    padding-top: 0.5em;
    height: auto;
    border-radius: 15px;
}
#wrap section#new_technology .newtechbox03 .newtechcont a {
    right: 20px !important;
}
#wrap section#new_technology .newtechbox03 .newtechcont figure {
    width: 100%;
}
#wrap section#new_technology .newtechbox03 .newtechcont p {
    font-size: 90%;
    width: 100%;
    line-height: 1.6;
}
#wrap section#new_technology .newtechbox03 .newtechcont h3 {
    font-size: 115%;
    margin: 1.1em auto 0.8em;
}
#wrap section#new_technology .newtechbox03 .newtechcont .tx {
    width: 100%;
    margin: -12px auto 0;
    box-shadow: -1px -1px 37px 24px rgb(164 210 238 / 72%);
    min-width: unset;
    padding: 1.5em 10% 1.5em;
}
#wrap section#new_technology .newtechbox03 .newtechcont .application {
    display: block;
    min-width: unset;
    width: 100%;
    margin: 0em auto 0;
    position: static;
}
#wrap section#new_technology .newtechbox03 .newtechcont .application h3 {
    font-size: 75%;
    width: 68px;
    height: 68px;
    padding: 24px 0;
    margin: 1.5em auto 0.3em;
}
#wrap section#new_technology .newtechbox03 .newtechcont .application ul {
    margin: 0.8em auto 1.5em;
    width: 96%;
}
#wrap section#new_technology .newtechbox03 .newtechcont .application li {
    text-indent: -20px;
    margin: 0.5em auto 0.5em 20px;
    line-height: 1.5;
    text-align: justify;
    font-size: 92%;
}   
}





/*
animation
*/
[data-aos="newtech-circle"] {
	transform:scale(0);
	opacity:0;
}
[data-aos="newtech-circle"].aos-animate {
	transform:scale(1);
	opacity:1;
}
[data-aos="no-anime"] {
	transform:scale(1);
}
[data-aos="no-anime"].aos-animate {
	transform:scale(1);
}

[data-aos="newtech-bg"] {
	transform:scale(1.2);
	opacity:1;
}
[data-aos="newtech-bg"].aos-animate {
	transform:scale(1);
	opacity:1;
}





/*
blur-bg 
*/
.blur-bg {
    position: relative;
    overflow: hidden;
    height: 70vh;
    width: 100%;
    margin: -190px auto 0;
}
.blur-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/img/solution/business-design/blur02.png);
    background-size: cover;
    background-position: center bottom;
    pointer-events: none;
    transform: translateY(-400px) scale(1.05);  /* default */
    opacity: 0;
    filter: blur(20px);
    transition: transform 0.8s ease-out, opacity 0.8s ease-out, filter 0.5s ease-out;
}

/* 表示時 */
.blur-bg.is-active::before {
    transform: translateY(-80px) scale(1);
    opacity: .7;
    filter: blur(0);
}






/*
articles_link
*/
#wrap #articles_link {
    height: 0;
    margin: 0;
    padding: 0;
}



/*
article
*/
#wrap #articles {
    padding-bottom: 18em;
    position: sticky;
    z-index: 1;
    height: auto;
    bottom: -65%;
    background: linear-gradient(rgb(203, 234, 255) 0%, rgb(255, 255, 255) 42%, rgb(226 241 255) 72%, rgb(157 209 255 / 0%) 100%);
    padding-top: 18em;
    margin-bottom: 0;
}
#wrap #articles h2 {
    font-weight: lighter;
    font-size: 170%;
    margin: 1em auto 2em;
}
#wrap #articles .newtechbox01-year{ /*Related articles*/
    position: absolute;
    width: 6.6em;
    top: calc(50% - 7.2em);
    left: calc(50% - 3.3em);
    text-align: center;
    font-size: 420%;
    opacity: 0.5;
    font-style: italic;
    color: #68bce5;
    letter-spacing: -4px;
    font-family: "游ゴシック", "UD Shin Go Regular", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background: linear-gradient(180deg, #1fbbaa96 0%, #ffffff 74%, #ffffff 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    z-index: -1;
}
#wrap #articles ul.flex_between {
    width: 92%;
    max-width: 1700px;
    margin: 0 auto;
}
#wrap #articles ul li.bnr {
    width: 24%;
    display: block;
    margin: 1vh auto;
    padding: 0;
    border-radius: 7px;
    box-shadow: -1px 0px 7px -1px rgb(186 209 223 / 67%);
    background: linear-gradient(0deg, #fffffff2 0%, #ffffffe3 60%, #ffffff73 93%);
    border: 1px solid #2ca2ce36 !important;
    transition: all 0.2s ease;
}
#wrap #articles ul li.bnr a {
    height: 100%;
    display: block;
    font-size: 88%;
    padding: 0 0 1.7em;
}
#wrap #articles ul li.bnr a p {
    margin: 1.1em auto .5em;
    font-size: 110%;
    color: #00476e;
    text-align: center;
    letter-spacing: 0.7px;
}
#wrap #articles ul li.bnr img {
    width: 100%;
    height: auto;
    border-radius: 5px 5px 0 0;
}
#wrap #articles ul li.bnr:hover {
    box-shadow: 8px 5px 12px rgb(137 164 181 / 60%);
}
#wrap #articles ul li.bnr:hover img{
    opacity: 1;
}
#wrap #articles ul h3 {
    width: 82%;
    margin: 0 auto;
    text-align: justify;
    line-height: 1.5;
    font-size: 108%;
    letter-spacing: .8px;
}






/*
mouse stalker
*/
.stalker {
  background-color: #080d31d0;
  border-radius: 50%;
  height: 30px;
  left: -15px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: -15px;
  transition: all .3s ease-out;
  width: 30px;
  z-index: 999;
}
.stalker.js-hover {
  background-color: #080d31d0;
  height: 50px;
  left: -25px;
  top: -25px;
  width: 50px;
}
.stalker.js-hover:after {
  position: absolute;
  content: "みる";
  top: 10px;
  left: 8px;
  width: 50px;
  color: #fff;
}
@media only screen and (max-width:599px) {
#wrap #articles {
    padding: 16em 0 0px;
    background: linear-gradient(rgb(203, 234, 255) 0%, rgb(255, 255, 255) 45%, rgb(226 241 255) 65%, rgb(157 209 255 / 0%) 100%);
    height: 100vh;
    margin-bottom: 97em;
    bottom: 0%;
}
#wrap #articles .newtechbox01-year{ /*Related articles*/
    width: 80%;
    font-size: 320%;
    left: calc(50% - 40%);
    top: calc(50% - 4.6em);
}
#wrap #articles p {
    width: 80%;
    display: block;
    margin: 0.5em auto;
}
#wrap #articles ul li.bnr {
    width: 92%;
}
#wrap #articles ul h3 {
    font-size: 100%;
}
.stalker {
    display: none;
}
.stalker.js-hover:after {
  content: unset;
}
}






/*
banner
*/
div#bnr {
    padding: 0em 0;
    margin: 0em auto;
}
#wrap #articles #bnr div.body {
    max-width: calc(1448px + 2%);
    width: 94%;
}
#wrap #articles #bnr div.body .bnr {
    height: 330px;
    border: 1px solid #1860a71a;
    padding: 24px 40px 20px;
    display: block;
    color: #444;
    background-repeat: no-repeat;
    margin: 1em auto;
    width: 48.6%;
    transition: all 0.2s ease;
    border-radius: 6px;
    box-shadow: -1px 0px 7px -1px rgb(186 209 223 / 67%);
}
#wrap #articles #bnr div.body .bnr *{
    font-family: "Noto Sans JP", sans-serif;
}
#wrap #articles #bnr div.body .bnr.tsunagaru {
    background-image: url(/img/index/bnr_tsunagaru.jpg);
    background-size: cover;
    background-position: center bottom;
    background-color: #fff;
}
#wrap #articles #bnr div.body .bnr.mediasite {
    background-image: url(/img/mediasite/index/bg.jpg);
    background-size: 68%;
    background-position: 105% top;
    background-color: #fff;
    padding: 24px 4% 20px;
}
#wrap #articles #bnr div.body .bnr.tsunagaru h2 {
    margin: 0em auto 4em;
    letter-spacing: 0.4px;
    font-size: 108%;
    color: #4d4d4d;
    text-align: center;
    font-weight: bold;
    color: #163a59;
}
#wrap #articles #bnr div.body .bnr.tsunagaru h2 span {
    font-size: 62%;
    margin-left: 10px;
    font-weight: 600;
    letter-spacing: 0;
}
#wrap #articles #bnr div.body .bnr.tsunagaru p {
    font-size: 104%;
    color: #163a59;
    letter-spacing: 0px;
    text-align: center;
    text-shadow: 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0, 0 0 3px #e4f0f0;
    font-weight: 400;
}
#wrap #articles #bnr div.body .bnr.mediasite * {
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
#wrap #articles #bnr div.body .bnr.mediasite h2 {
    margin: 1.4em auto 0.8em;
    letter-spacing: -0.5px;
    font-size: 195%;
    color: #222;
    font-weight: bold;
    text-align: left;
}
#wrap #articles #bnr div.body .bnr.tsunagaru h2 span {
    font-size: 75%;
    margin-left: 10px;
    letter-spacing: 0;
    font-style: normal;
    color: #333;
}
#wrap #articles #bnr div.body .bnr.mediasite p {
    font-size: 104%;
    text-indent: -10px;
    padding-left: 2px;
    line-height: 1.8;
    font-weight: 400;
}
#wrap #articles #bnr div.body .bnr:hover {
    color: #444;
    opacity: 1;
    border-color: #1860a77a;
    border-radius: 10px;
    box-shadow: 8px 5px 12px rgb(137 164 181 / 60%);
}
@media only screen and (max-width:1139px) {
#wrap #articles #bnr div.body .bnr.mediasite p br{
    display: none;
}
}
@media only screen and (max-width:599px) {
div#wrap #articles #bnr {
    padding: 0em 0;
    margin: 1.5em auto 0;
}
#wrap #articles #bnr div.body .bnr {
    height: 11.3em;
    width: 94%;
    margin: 0.5em auto;
    padding: 22px 6%;
}
#wrap #articles #bnr div.body .bnr.tsunagaru {
    background-color: #c0dce0;
    height: 220px;
}	
#wrap #articles #bnr div.body .bnr.tsunagaru h2 {
    margin: -0.5em auto 2.8em;
    font-size: 85%;
}
#wrap #articles #bnr div.body .bnr.tsunagaru p {
    font-size: 88%;
}
#wrap #articles #bnr div.body .bnr.mediasite {
    padding: 24px 7% 20px;
    height: 220px;
}	
#wrap #articles #bnr div.body .bnr.mediasite h2 {
    font-size: 155%;
    margin: 0.5em auto 0.6em;
}
#wrap #articles #bnr div.body .bnr.mediasite p {
    line-height: 1.5;
    text-align: justify;
    font-size: 88%;
    text-indent: 0;
    margin: 1.3em auto 0;
}
}





/*
whatsnew
*/
#whatsnew {
    margin: 0 auto 0;
    padding: 6em 0 4em !important;
}
#whatsnew .body {
    max-width: 1040px;
}
#wrap #whatsnew h2 {
    font-size: 150%;
    margin-bottom: 2em;
}
#whatsnew_link{
    width: 165px;
    margin: 1em 15px 0 auto;
    text-align: center;
    padding-right: 22px;
}
#whatsnew a div {
    display: flex;
}
#whatsnew a .date {
    width: 140px;
    flex-direction: column;
    display: flex;
    justify-content: center;
}
#whatsnew a .category {
    width: 120px;
    text-align: center;
    background: #f6f6f6;
    padding: 1px 10px;
    font-size: 90%;
    margin: 0.2em auto 0.2em;
}
#whatsnew ul li a {
    display: flex;
    justify-content: space-between;
    padding: 0.9em 4% 0.9em;
    font-size: 93%;
    color: inherit;
    border-bottom: 1px solid #c5c5c5;
}
#whatsnew ul li a:hover {
    opacity: 1;
    background: #f7f7f7;
    text-decoration:none;
    color: #444;;
    border-bottom: 1px solid #c5c5c5;
}
#whatsnew_link:hover{
    opacity:1;
    text-decoration:underline;
    color:inherit;
}
#whatsnew a .text {
    width: 77%;
    max-width: 875px;
    padding-left: 0;
    flex-direction: column;
    display: flex;
    justify-content: center;
    text-align: left;
    margin-left: 25px;
}
#whatsnew a .text.download:after {
    display: contents;
}
#whatsnew .blank:after {
    display: contents;
}
@media only screen and (max-width:599px) {
#whatsnew {
    margin: 0 auto 0;
    padding: 4em 0 1em !important;
}
#whatsnew h3{
    background: none;
}
#whatsnew .body {
    width: 84%;
    padding: 0em 0% 0em;
}
#whatsnew ul {
    margin: 0 auto;
}
#whatsnew ul li a {
    display: block;
    padding: 0.7em 4% 0.7em;
}
#whatsnew a div {
    margin-bottom: 0.7em;
    width: 100%;
}
#whatsnew a .date {
    width: 101px;
}
#whatsnew a .category {
    padding: 1px 0;
    margin: 0 5%;
    font-size: 87%;
    width: 100px;
}
#whatsnew a .text {
    font-size: 100%;
    width: 100%;
    margin-left: 0;
    line-height: 1.5;
}
}




footer#footer {
	margin-top:0px;
}