@charset "utf-8";
/*----------------------------------

	top.css

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

/*--------------------
    base
--------------------*/

body {
    background: #fff;
    padding-top: 0 !important;/*top only -----cmn.jsの取り消し*/
}

main {
    padding-bottom: 0;/*toradexバナーがある場合*/
}

.wrapper {
    background-repeat: repeat-y;
    background-size: 50% 100%;
    background-position: 0 0;
    background-image:linear-gradient(#dedef4,#f2f2f7);
    width: 100%;
}

/*--------------------
    section
--------------------*/

section {
   padding: 2rem 1rem;
}

section h3 span.display-2,
section h3 span.display-3,
section h3 span.display-4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;/*-----------------Google font のウェイト指定が必須*/
}

@media screen and (min-width: 992px) {

    section {
        padding: 5rem 1rem;
    } 

}/*@media end*/

/*top*/

section.top {
    height: 75vh;
    background: #17a2b8;/*IE*/
    background:-webkit-repeating-linear-gradient(135deg, #e6f9fc 10%, #17a2b8 20%, #242c97 30%, #17a2b8 40%, #e6f9fc 50%);
    background-size: 300% 300%;
    animation: colors 12s ease infinite 1s;
    
    position: relative;
    padding-top: 64px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
}

@keyframes colors {
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

section.top div.imageBox {
	width: 100%;
	height: 100%;
	background-image: url("/common/cmn_img/bg_main@0.25x.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover !important;
	/*background-attachment: fixed;スマホで効かない*/
    display: -ms-flexbox !important;
    display: flex !important;
    justify-content: left;
    align-items: center;
}

section.top h2.slogan {color: rgba(255,255,255,0.85) !important;}

section.top h2,
section.top h3 {
    font-family: 'Oswald', sans-serif;
}

section.top h2.slogan .display-1,
section.top h2.slogan .display-2 {
    font-weight: 500;/*-----------------Google font のウェイト指定が必須*/
    color: rgba(0,0,0,0.1) !important;
    text-shadow: 8px 8px 0 rgba(255,255,255,0.1);
    -webkit-text-stroke: 1px #d2d2de !important;
    font-style: normal;
}

/*
_:-ms-lang(x)::-ms-backdrop, .selector {
   IE11 のみ適用される 
}
*/ 

_:-ms-lang(x)::-ms-backdrop, section.top h2.slogan .display-1 {/* IE11 のみ適用される */
    color: #f2f2f7 !important;
}

_:-ms-lang(x)::-ms-backdrop, section.top h2.slogan .display-2 {/* IE11 のみ適用される */
    color: #f2f2f7 !important;
}

section.top p.text-white {
text-shadow: 0 0 3px rgba(0,0,0,0.5),
    0 0 16px rgba(0,0,0,0.75);
}

section.top div.imageBox  {
	animation: fadein 1s ease-in forwards;
}

section.top div.imageBox h2,
section.top div.imageBox p {
	animation: fadein 1s ease-in forwards 1s;
    opacity: 0;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

@media screen and (min-width: 992px) {

    section.top {
        height: 100vh;
        padding-top: 96px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;
    }

    section.top h2.slogan {
        font-size:calc(1.475rem + 2.7vw);
    }

    section.top h2.slogan .display-1 {
        font-size:calc(1.725rem + 5.7vw);
    }

    section.top h2.slogan .display-2 {
        font-size:calc(1.675rem + 5.1vw);
    }

    section.top div.imageBox {
        background-image: url("/common/cmn_img/bg_main@0.75x.jpg");
        background-attachment: fixed;
    }
}/*@media end*/

/*news*/

section.news {padding-top:1rem;}

section.news h3 {
    color:rgba(36,44,151,0.25);/* 非対応のブラウザ用 */
    display: block;
    background: linear-gradient(180deg, rgba(36,44,151,0.1) 0%, rgba(36,44,151,0.35) 100%);
    background: -webkit-linear-gradient(-90deg, rgba(36,44,151,0.1) 0%, rgba(36,44,151,0.35) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

div.topNews {
    background: #fff;
    padding-bottom: 0.5rem;
}

div.topNews div.newsBox {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 2rem;
    border-top:2px solid rgba(36,44,151,0.35);/*#242c97;*/
}

div.topNews ul.list {
    font-size:0.9375rem;
}

div.topNews ul.list dl dt{
    font-size:0.9375rem !important;
    margin-right: 1rem;
}

div.topNews ul.list dl dd {
    font-size:0.9375rem !important;
}

div.topNews ul.list li.list_item {
    padding: 1rem 0 0 0;
}

div.topNews ul.list li.list_item dl dd.tag span.tag {
    font-size:0.75rem !important;
    max-width: 100px;
}

@media screen and (min-width: 992px) {
    
    div.topNews div.newsBox {
        max-height: 360px;
        overflow-y: auto;
        padding-top: 0.5rem;
    }
    

    div.topNews ul.list li.list_item dt,
    div.topNews ul.list li.list_item dd.tag {
        white-space: nowrap;
    }
    div.topNews ul.list li.list_item dt {
        text-align: right;
    }
    
    div.topNews ul.list li.list_item dd.text {
        padding-right: 24px;
    }
    
}/*@media end*/

/*about*/

section.about {
    background-image:linear-gradient(#04040d,#171c61);
}

section.about h3,
section.about div.textBox dl {
    color: #f2f2f7 !important;
}

section.about div.textBox dl dd {
    margin-bottom: 2rem;
}

@media screen and (min-width: 992px) {
    
    section.about {
        background-repeat: repeat-y;
        background-size: 50% 100%;
        background-position: 0 0;
        background-image:linear-gradient(#04040d,#171c61);
    }
    
    section.about h3 {
        margin-bottom: -2rem;
        margin-top: 2rem;
    }
    
    section.about div.textBox dl {
        margin-left: 0.5rem;
    }
    
}/*@media end*/

@media screen and (min-width: 1280px) {
    
    section.about h3 {
       margin-bottom: -4rem;
       margin-top: 4rem;
    }
    section.about div.textBox dl dd {
        margin-bottom: 4rem;
    }

}/*@media end*/

@media screen and (min-width: 1600px) {
    
    section.about h3 {
       margin-bottom: -6rem;
        margin-top: 6rem;
    }
    section.about div.textBox dl dd {
        margin-bottom: 6rem;
    }

}/*@media end*/

/*advantage*/

section.advantage h3 {    
    color:rgba(36,44,151,0.25);/* 非対応のブラウザ用 */
    display: block;
    background: linear-gradient(180deg, rgba(36,44,151,0.1) 0%, rgba(36,44,151,0.35) 100%);
    background: -webkit-linear-gradient(-90deg, rgba(36,44,151,0.1) 0%, rgba(36,44,151,0.35) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.toradexBox {
    background-color: rgba(0,0,0,0.35);
	background-image: url("/common/cmn_img/bg_toradex@0.5x.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover !important;
	/*background-attachment: fixed;*/
    background-blend-mode: overlay;
}  

section.toradexBox .container a {
    display: block;
    background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 50%,#17a2b8 100%);
    background-size: 100% 600%;
    background-position: 0 0;
    transition: background-position 0.4s;
}

section.toradexBox .container a:hover {   
    background-position: 0 100%;
}

@media screen and (min-width: 992px) {

    section.toradexBox {
        background-image: url("/common/cmn_img/bg_toradex.jpg");
        background-attachment: fixed;
     }   

}/*@media end*/


/*contact*/

section.contactBox {
	background-image: url("/common/cmn_img/bg_main@0.25x.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover !important;
	/*background-attachment: fixed;*/
    background-blend-mode: luminosity;
}  

section.contactBox a {
    max-width: 1600px;
    margin: auto;
}

@media screen and (min-width: 992px) {

    section.contactBox {
        height: 240px !important;
        background-image: url("/common/cmn_img/bg_main@0.75x.jpg");
        background-attachment: fixed;
     }   

}/*@media end*/

/* button_arrow */

.button_arrow {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.button_arrow a {
    background: linear-gradient(135deg, #171c61 0%, #242c97 50%,#17a2b8 100%);
    background-size: 100% 600%;
    background-position: 0 0;
    transition: background-position 0.4s;
    
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    width: 75%;
    max-width: 320px;
    margin: auto;
    padding: 0.75rem 2rem;
    color: #fff;
    /*transition: 0.2s ease-in-out;*/
    font-weight: 500;
    /*transform: skew(-10deg, 0deg);*/
}
.button_arrow a span {
    transform: skewX(10deg);
}
.button_arrow a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -1.5rem;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 16px;
    height: 1px;
    background-color: #17a2b8;
    transition: 0.2s ease-in-out;
}
.button_arrow a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.5rem;
    transform: translateY(-50%);
    width: 60px;
    height: 1px;
    background-color: #20c8e3;
    transition: 0.2s ease-in-out;
}
.button_arrow a:hover:before,
.button_arrow a:hover:after {
    right: -3rem;
}
.button_arrow a:hover {
    background-position: 0 100%;
}

/*scrolldown*/

.scrolldown{
	position:absolute;
	bottom:6%;
	right:32px;
    opacity: 1;
	animation: arrowmove 3s ease-in-out infinite;
}

@media screen and (min-width: 992px) {
    
    .scrolldown{
        position:absolute;
        bottom:6%;
        right:50%;
        opacity: 1;
        animation: arrowmove 3s ease-in-out infinite;
    }

}/*@media end*/

@keyframes arrowmove {
      0%{bottom:6%;opacity: 1;}
      50%{bottom:8%;opacity: 0;}
     100%{bottom:6%;opacity: 1;}
 }

.scrolldown span{
	position: absolute;
	left:-20px;
	bottom:10px;
	color: #fff;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.scrolldown:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);
}

.scrolldown:after{
	content:"";
	position: absolute;
	bottom:0;
	right:0;
	width:1px;
	height: 60px;
	background:#fff;
}

/*scroll_animation--------------------top.js*/

@media screen and (min-width: 992px) {

    /* その場で */
    .fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    } 

    /* 下から */
    .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }    

    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    .fadeInTrigger,
    .fadeUpTrigger{
        opacity: 0;
    }

    /* 左へ */
    .flipLeft{
    animation-name:flipLeftAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    perspective-origin:left center;
    opacity:0;
    }    

    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    .flipLeftTrigger{
        opacity: 0;
    }    

    /*アニメーション設定*/

    /* 回数 */

    .count2{  
        animation-iteration-count: 2;/*この数字を必要回数分に変更*/
    }

    .countinfinite{  
        animation-iteration-count: infinite;/*無限ループ*/
    }

    /* スタートの遅延時間 */

    .delay-time05{  
        animation-delay: 0.5s;
    }

    .delay-time1{  
        animation-delay: 1s;
    }

    .delay-time15{  
        animation-delay: 1.5s;
    }

    .delay-time2{  
        animation-delay: 2s;
    }

    .delay-time25{  
        animation-delay: 2.5s;
    }

    /* 変化する時間 */

    .change-time05{  
        animation-duration: 0.5s;
    }

    .change-time1{  
        animation-duration: 1s;
    }

    .change-time15{  
        animation-duration: 1.5s;
    }

    .change-time2{  
        animation-duration: 2s;
    }

    .change-time25{  
        animation-duration: 2.5s;
    }
    
    .ease-in-out {
        animation-timing-function: ease-in-out;
    }
    
    .ease-in {
        animation-timing-function: ease-in;
    }

}/*@media end*/

@keyframes fadeInAnime{
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }
  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}