@charset "utf-8";
*{
    margin: 0px;
    padding: 0px;
}
h1,h2,h3{
    font-size: 100%;
    font-weight: normal;
}
img{
    border-style: none; /* ie */
}
a{
    text-decoration: none;
}
body{
    width: 100%;
    background-image: url("./img/bg.png");
    background-position: left top;
    font-family: Noto Sans JP, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Meiryo, sans-serif;
    font-family: Noto Serif JP, "游明朝体", "Yu Mincho", YuMincho, Meiryo, sans-serif;
    font-weight: 600;
    border-bottom: solid 40px #2c244c;
}
.conteiner{
    min-height: calc(100vh - 40px);
    position: relative;
}
header{
    width: 100%;
}
header a img:hover{
    opacity: 0.5;
    transition: 0.3s;
}
.aktemp{
    width: 80%;
    padding: 0 12% 0 8%;
    font-size: 120%;
    background-color: rgba(255,255,255,0.5);
    text-align:center;
}

.logo-yu{
    margin: 50px 0 0 60px;
    width: 6.145%;
}
.logo-eng{
    margin-left: 15px;
    width: 15.729%;
}
.logo-site{
    position: absolute;
    margin: 1% 0 0 60px;
    width: 21.406%;
}
.logo-web{
    position: absolute;
    top: 45px;
    right: 50px;
    width: 27.345%;
}
.light-wide,.light-left,.light-center,.light-right{
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
.light-left{
    top: 30%;
    left: 9.375%;
    width: 7.031%;
}
.light-center{
    top: 40px;
    right: 30.729%;
    width: 6.25%;
}
.light-right{
    top: 25%;
    right: 6.77%;
    width: 16.875%;
}
.light-wide{
    width: 28.75%;
}
.main-row{
    display: flex;
    width: 80%;
    padding: 0 12% 0 8%;
}
.main-row-col{
    width: 33%; /* ie */
    float: left; /* ie */
    width: calc(100% / 3);
    text-align: center;
    position: relative;
}
.main-row-col a::after{
    content: "";
    background-image: url("./img/thumb_start.png");
	background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 16%;
    height: 16%;
}
.main-row .left a::after{
    top:40%;
    left: 44%;
}
.main-row .center a::after{
    top: 32%;
    left: 42%;
}
.main-row .right a::after{
    top: 46%;
    left: 46%;
}
.main-row .left{
    margin-top: 10%;
}
.main-row .right{
    margin-top: 15%;
}
.main-row img.bottom{
    position: absolute;
    z-index: -1;
}
.main-row .left img.thumb-text{
    display: block;
    width: 35%;
    position: absolute;
    bottom: 8%;
    left: 10%;
}
.main-row .center img.thumb-text{
    display: inline-block;
}
.main-row .center img.text-left{
    width: 42%;
}
.main-row .center img.text-right{
    width: 29%;
    margin-left: -4px;
}
.main-row .right img.thumb-text{
    display: block;
    width: 25%;
    position: relative;
    bottom: 13%;
    left: 80%;
    position: absolute;
    bottom: 8%;
    right: 10%;
}
.main-row-col img{
    max-width: 100%;
}
.main-row-col a:hover > img , .main-bottom a:hover > .bottom{
    filter: brightness(50%);
    transition: 0.3s;
}
@media all and (-ms-high-contrast: none) {
    .main-row-col a{
        transition: 0.3s;
    }
    .main-row-col a:hover{
        opacity: 0.8;
    }
}
.main-bottom{
    position:relative;
    min-height: 17vh;
}
.thumb-bottom{
    position:absolute;
    margin-top: -9%;
    left: 50%;
    width: 100%;
    max-width: 15%;
    z-index: 2;
}
.main-bottom .text{
    z-index: 3;
}
.main-bottom .bottom2{
    z-index: 1;
    margin-left: -0.2%;
}
.main-bottom .banner{
    max-width: 10%;
    margin: -1% 0 0 -11%;
}
.bg-illust{
    position: absolute;
    bottom: 0;
    z-index: -2;
    margin: 0 0 -15px 135px;
    width: 86%;
}
footer{
    width: 100%;
    bottom: 0;
}
.logo-online{
    position: absolute;
    bottom: 20px;
    left: 60px;
    width: 7.343%;
}
.bg-illust{
    position: absolute;
    bottom: 0;
    z-index: -2;
    margin: 0 0 -15px 7%;
    width: 86%;
}
/* 16:9 1366×768(ノートPC用) */
@media (max-height:768px){
    .logo-yu{
        width: 4%;
        margin-top: 30px;
    }
    .logo-eng{
        width: 12%;
    }
    .logo-site{
        width: 16%;
    }
    .logo-web{
        width: 22%;
        top: 30px;
    }
    .main-row{
        width: 70%;
        padding: 0 18% 0 12%;
    }
    .thumb-bottom{
        left: 46%;
        margin-top: -10%;
    }
}
/* 1024 (スマホ用) */
.smp{
    display: none;
}
@media (max-width:1024px){
    .pc{
        display: none;
    }
    .smp{
        display: inline;
    }
    .conteiner{
        min-height: auto;
        position: static;
        border-bottom: none;
    }
    body{
        width: 100%;
        background-image: none;
    }
    header{
        background-image: url("./img/bg.png");
        background-position: left top;
        border-top:solid 30px #2c244c;
        min-height: 80vw;
        position: relative;
        overflow: hidden;
    }
    main{
        position: relative;
        background-color: #f4f4fc;
        display:block; /* ie */
    }
    .logo-yu {
        margin: 2% 0 0 4%;
        width: 12%;
    }
    .logo-eng {
        width: 36%;
        margin-left: 2%;
    }
    .logo-web {
        position: absolute;
        z-index: 2;
        top: 26%;
        width: 45%;
        right: 4%;
    }
    .light-left,.light-center,.light-wide{
        z-index: 1;
    }
    .light-left {
        width: 16%;
        max-width: 70px;
        top: 22%;
        left: 15px;
    }
    .light-center {
        width: 15%;
        max-width: 70px;
        top: 3%;
        right: 20%;
    }
    .light-wide {
        width: 44%;
    }
    .light-header-left{
        top: 75%;
        left: 50px;
    }
    .light-header-right{
        top: 68%;
        left: auto;
        right: 20px;
    }
    .bg_illust{
        width: 100%;
        position: absolute;
        bottom: -5%;
        left: 2%;
        opacity: 0.6;
    }
    .logo_contents {
        display: block;
        width: 44%;
        margin: 0 auto;
        padding: 50px 0 0 0;
    }
    .main-row {
        -webkit-flex-direction: column;          /* Safari etc. */
        -ms-flex-direction    : column;          /* IE10        */
        flex-direction        : column;
    }
    .main-row{
        position: relative;
        z-index: 2;
        margin: 12% 0;
        width: 80%;
        padding: 0 10%;
    }
    .main-row .left{
        order: 2;
    }
    .main-row .center{
        order: 1;
    }
    .main-row .right{
        order: 3;
    }
    .main-row-col{
        width: 100%;
        text-align: left;
        min-height: 0%; /* ie */
    }
    .main-row-col::after {
      content: "";
      display: block;
      clear: both;
    }
    .main-row .main-row-col img.thumb-img{
        width: 50%;
    }
    .main-row .main-row-col img.thumb-text{
        position: absolute;
        left: 60%;
        top: 40%;
    }
    .main-row .center img.thumb-text{
        top: 35%;
    }
    .main-row .left img.thumb-text{
        margin-left: 2%;
    }
    .main-row .center img.text-right{
        margin: 8% 0 0 4%;
    }
    .main-row .right img.thumb-text{
        margin-left: 3%;
        width: 28%;
    }
    .main-row .left a::after{
        top: 44%;
        left: 22%;
    }
    .main-row .center a::after{
        top: 38%;
        left: 20%;
    }
    .main-row .right a::after{
        top: 44%;
        left: 22%;
    }
    .thumb-bottom{
        max-width: 40%;
        left: 50%;
    }
    .main-bottom{
        padding-top: 30px;
        min-height: 100px;
    }
    .main-bottom .banner{
        width: 33%;
        max-width: none;
        margin: 5% 0 0 0;
        left: 10%;
    }
    .light-main-top{
        left: 10%;
        top: 29%;
        width: 18%;
    }
    .light-main-middle{
        left: auto;
        right: 22%;
        top: 33%;
        width: 18%;
    }
    .light-main-bottom{
        left: 10%;
        top: 77%;
    }
    .light-main{
        right: 18%;
        top: 52%;
        width: 20%;
        max-width: none;
    }
    .bg-illust-smp{
        width: 80%;
        margin: 0 0 -3% 10%;
    }
    footer{
        position: relative;
        z-index: 1;
        width: 100%;
        height: 80px;
        background-color: #2c244c;
    }
}
/* js用 */
.lity-wrap::after{
    content: "◀ TOPページに戻る";
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9994;
    color: #000;
    font-size: 20px;
    line-height: 20px;
    padding: 16px 24px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 1);
}
.lity-close{
    background-color: rgba(0, 0, 0, 0.6)!important;
}
/* effect用 */
.main-row-col a:hover > img.e1, .main-bottom img.e1{
    animation: spin 6s linear infinite;
}
.main-row-col a:hover > img.e2{
    animation: spin 8s linear infinite;
    animation-direction: reverse;
}
.main-row-col a:hover > img.e3{
    animation: spin 10s linear infinite;
}
@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(15px, 15px) rotateZ(1deg)}
    50% {transform: translate(0px, 15px) rotateZ(0deg)}
    75% {transform: translate(15px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}