#key-box{
	min-height: 100vh;
	position: relative;
}
#key-box .title {
       position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 5;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 -13% 0 -18%;
}
#key-box .row {
    height: 100vh;
    overflow: hidden;
    gap: 10px;
}
#key-box .row li span {
    display: block;
    margin-bottom: 10px;
}
#key-box .slide-left, #key-box .slide-right{
	height: 100vh;
}
#key-box .infiniteslide_wrap{
	height: 100vh !important;
}
@media only screen and (max-width: 767px) {
	header h1{
		top: 0;
	}
}
@media only screen and (min-width: 768px) {
    #key-box .title {
        margin: 0 auto;
    }
    #key-box .row {
        margin: 0 auto;
        justify-content: center;
        gap: 410px;
    }
    #key-box .row li span {
        margin-bottom: 40px;
    }
}



.title-shared {
    text-align: center;
    margin-bottom: 8vw;
}
.title-shared span {
    background: #FACB27;
    background: linear-gradient(to top, #FACB27 0%, #F83800 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 14vw;
    margin-bottom: 3vw;
}
.btn-cus a:before {
    display: none;
}
.simpleParallax {
    overflow: visible !important;
}
.rss-shared .row {
    margin-bottom: 3vw;
    padding: 2% 4% 2% 6%;
    display: flex;
    align-items: center;
    position: relative;
    border-top: 2px solid;
}
.rss-shared .row:last-of-type {
    border-bottom: 2px solid #fff
}
.rss-shared .row .photo {
    width: 39%;
}
.rss-shared .row .photo span {
    width: 100% !important;
    height: 20vw !important;
}
.rss-shared .row dl {
    color: #fff;
    width: 56%;
    margin-left: 6%;
    padding-right: 50px;
    box-sizing: border-box;
}
.rss-shared .row .arrow {
    width: 40px;
    height: 40px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: 13px;
    bottom: 38px;
}
.rss-shared .row .arrow img {
    width: 19px;
}
.rss-shared .row dl dt {
    font-size: 12px;
    color: #ff0000;
    font-family: 'Roboto';
}
.rss-shared .row dl dd {
    font-size: 15px;
    line-height: 25px;
    font-weight: 500;
}
@media only screen and (min-width: 768px) {
    .title-shared {
        margin-bottom: 58px;
    }
    .title-shared span {
        font-size: 90px;
        margin-bottom: 20px;
    }
    .rss-shared .row {
        margin-bottom: 0;
        padding: 23px 0;
    }
    .rss-shared .row .photo {
        width: 167px;
    }
	.rss-shared .row .photo:hover{
		opacity: 0.8;
		transition: all 0.5s;
	}
    .rss-shared .row .photo span {
        height: 124px !important;
    }
    .rss-shared .row .arrow {
        bottom: 60px;
    }
    .rss-shared .row .arrow img {
        width: 30px;
    }
    .rss-shared .row dl dt {
        font-size: 18px;
    }
    .rss-shared .row dl dd {
        display: block;
        font-size: 24px;
    }
    .rss-shared .row dl dd a:hover {
        border-bottom: 1px solid #fff;
    }
}



#news {
    position: relative;
    padding: 15vw 0;
}
#media {
    position: relative;
    padding: 15vw 0;
}
#media .deco {
    width: 24%;
    position: absolute;
    right: 0;
    top: 0;
}
@media only screen and (min-width: 768px) {
    #news {
        padding: 101px 0;
    }
    #news .btn-cus {
        position: absolute;
        right: 0;
        top: 20px;
        width: 190px;
    }
    #news .btn-cus a {
        font-size: 30px;
    }
    #news .btn-cus a .line {
        left: -12px;
        width: 222px;
        top: 29px;
    }
    #news #feed {
        min-height: 490px;
    }
    #media {
        padding: 88px 0;
    }
    #media .btn-cus {
        position: absolute;
        right: 0;
        top: 20px;
        width: 190px;
        z-index: 6;
    }
    #media .btn-cus a {
        font-size: 30px;
    }
    #media .btn-cus a .line {
        left: -12px;
        width: 222px;
        top: 29px;
    }
    #media #feed2 {
        min-height: 490px;
    }
    #media .deco {
        width: 185px;
        right: calc(50% - 41vw);
        top: 200px;
    }
}


#archive {
    position: relative;
    padding: 15vw 0;
}
#archive .box {
    padding: 20% 5%;
    background: rgba(248, 54, 0, 0.6);
}
#archive .box::after {
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7px);
    content: "";
    z-index: -1;
}
#archive .box .title {
    margin-bottom: 5vw;
    overflow: hidden;
}
#archive .box .title span {
    position: relative;
    font-size: 5vw;
    display: inline-block;
}
#archive .box .title span::after {
    content: "";
    position: absolute;
    top: 4vw;
    left: 100%;
    height: 2px;
    background: #fff;
    right: 0;
    width: calc(50% + 10vw);
    margin-left: 20px;
}
#archive .box .row {
    margin-bottom: 10vw
}
#archive .box .row dl {
    font-weight: 600;
    margin-bottom: 20px;
}
#archive .box .row dl dt {
    color: #f83600;
}
#archive .box .row dl dd {
    margin-left: 10px;
    font-size: 15px;
}
#archive .deco1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 26%;
    z-index: -1;
}
#archive .deco2 {
    position: absolute;
    top: 72vw;
    right: 0;
    width: 30%;
    z-index: -1;
}
#archive .deco3 {
    position: absolute;
    top: 125vw;
    left: 0;
    width: 30%;
    z-index: -1;
}
#archive .deco4 {
    position: absolute;
    top: 245vw;
    right: 0;
    width: 30%;
    z-index: -1;
}
@media only screen and (min-width: 768px) {
    #archive {
        padding: 54px 0;
    }
    #archive .wrap {
        width: 1180px;
        padding: 0 20px;
    }
    #archive .box {
        padding: 102px;
    }
    #archive .box .title-shared {
        margin-bottom: 80px;
    }
    #archive .box::after {
        left: 20px;
        right: 20px;
    }
    #archive .box .title {
        margin-bottom: 46px;
        margin-right: -30px;
    }
    #archive .box .title span {
        font-size: 36px;
        letter-spacing: -3px;
    }
    #archive .box .title span::after {
        top: 30px;
        height: 3px;
        width: 580px;
        box-sizing: border-box;
    }
    #archive .box .row {
        margin-bottom: 20px;
        max-width: 860px;
        margin: 0 auto 129px;
    }
    #archive .box .row:last-child {
        margin-bottom: 0;
    }
    #archive .box .row dl {
        margin-bottom: 23px;
    }
    #archive .box .row dl dt {
        font-size: 24px;
        letter-spacing: 2px;
    }
    #archive .box .row dl dd {
        font-size: 30px;
        line-height: 40px;
    }
    #archive .deco1 {
        width: 280px;
        left: -130px;
        top: -70px;
    }
    #archive .deco2 {
        width: 330px;
        right: -140px;
        top: 552px;
    }
    #archive .deco3 {
        top: 980px;
        width: 350px;
        left: -220px;
    }
    #archive .deco4 {
        top: auto;
        bottom: 20px;
        width: 300px;
        right: -120px;
    }
}


#korabo {
    position: relative;
    padding: 15vw 0;
}
#korabo h2 {
    display: inline-block;
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
    margin-bottom: 43vw;
}
#korabo h2 .jp {
    font-size: 10vw;
    font-style: italic;
}
#korabo h2 .en {
    background: #FACB27;
    background: linear-gradient(to top right, #FACB27 0%, #F83800 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#korabo .title {
    font-size: 5.5vw;
    margin-bottom: -50vw;
    z-index: 5;
    position: relative;
}
#korabo .title > span {
    background: #000;
}
#korabo .photo {
    width: 45%;
    margin: 0 auto -1vw;
}
#korabo .deco {
    position: absolute;
    top: -18vw;
    left: 0;
    width: 30%;
    z-index: -1;
}
#korabo dl dt {
    margin-bottom: 7vw;
    font-style: italic;
    font-size: 5vw;
}
@media only screen and (min-width: 768px) {
    #korabo {
        padding: 310px 0 148px;
    }
    #korabo .wrap {
        width: 1200px;
        padding: 0 20px;
    }
    #korabo h2 {
        margin-left: 140px;
        white-space: nowrap;
        line-height: 80px;
        margin-bottom: 136px;
        position: relative;
        z-index: 10;
    }
    #korabo h2 .jp {
        font-size: 130px;
        letter-spacing: -21px;
    }
    #korabo h2 .en {
        font-size: 60px;
    }
    #korabo .title {
        font-size: 61px;
        margin-bottom: -20px;
        position: absolute;
        right: 30px;
        top: 210px;
        white-space: nowrap;
    }
    #korabo .title > span {
        width: 66px;
        display: block;
        padding: 40px 1px;
        letter-spacing: -5px;
    }
    #korabo .photo {
        margin: 0;
        position: absolute;
        right: -415px;
        top: -240px;
        width: 720px;
    }
    #korabo .deco {
        top: -267px;
        left: -270px;
        width: 615px;
    }
    #korabo dl dt {
        margin-bottom: 60px;
        font-size: 60px;
        line-height: 100px;
        position: relative;
        z-index: 5;
        margin-left: -34px;
        letter-spacing: -3px;
    }
    #korabo dl dd {
        font-size: 38px;
        line-height: 78px;
        margin-left: 18px;
        letter-spacing: -2px;
		position: relative;
		z-index: 5;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1250px) {
    #korabo .photo {
        right: -327px;
    }
	#korabo dl dt{
		font-size: 55px;
		        line-height: 87px;
	}
	#korabo dl dd {
    font-size: 34px;
    line-height: 67px;
	}
}


#contact {
    position: relative;
    padding: 15vw 0 0vw;
    background: url("../img/media/contact_bg_deco.png"), url("../img/media/contact_bg.jpg");
    background-size: auto, auto;
    background-repeat: no-repeat, repeat;
    background-position: center top, center top;
}
#contact h2 {
    width: 98%;
    margin: 0 auto 6vw;
    position: relative;
    z-index: 5;
}
#contact .txt {
    margin-bottom: 8vw;
    position: relative;
    z-index: 5;
    text-shadow: -2px -2px 0px #000, 2px 2px 0px #000, 2px -2px 0px #000, 2px 3px 0px #000, 2px 2px 0px #000, 3px 4px 0px #000;
}
#contact .deco1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 18%;
    z-index: 0;
}
#contact .tel {
    text-align: center;
    padding: 5vw 0;
    background: url("../img/media/contact_box_line1.png"), url("../img/media/contact_box_line2.png");
    background-size: auto 100%, auto 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    margin-bottom: 8vw;
    text-shadow: -2px -2px 0px #000, 2px 2px 0px #000, 2px -2px 0px #000, 2px 3px 0px #000, 2px 2px 0px #000, 3px 4px 0px #000;
}
#contact .tel dt {
    font-size: 5vw;
    margin-bottom: 2vw;
}
#contact .tel dt .tel-icon {
    font-size: 8vw;
    display: flex;
    justify-content: center;
}
#contact .tel dt .tel-icon span {
    display: inline-block;
    width: 6%;
    margin-right: 1%;
}
#contact .tel dd {
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
}
#contact .group {
    flex-direction: column;
    margin-bottom: 10vw;
}
#contact .group .col1 a,#contact .group .col2 a{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
#contact .group .line {
    align-items: center;
    margin-bottom: 20px;
    margin: 0 auto 6vw;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
#contact .group .line dt {
    text-align: center;
    line-height: 1.5;
}
#contact .group .line dd {
    margin-left: 10px;
    width: 80px;
}
#contact .group .web {
    align-items: center;
    margin-bottom: 20px;
    margin: 0 auto 2vw;
    justify-content: space-between;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
#contact .group .web dt {
    text-align: center;
    line-height: 1.5;
}
#contact .group .web dd {
    width: 90px;
    margin-left: 20px;
    margin-right: -22px;
}
#contact .group .web dd .icon {
    width: 83%;
}
#contact .slider-bottom {
    line-height: 1;
}
#contact .slider-bottom li {
    font-size: 15vw;
}
#contact .slider-bottom li span {
    margin-right: 10px;
    background: #FACB27;
    background: linear-gradient(to top, #FACB27 -7%, #F83800 61%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media only screen and (min-width: 768px) {
    #contact {
        padding: 40px 0 20px;
    }
    #contact h2 {
        margin: 0 auto 10px;
        text-align: center;
        width: 100%;
    }
    #contact .txt {
        margin-bottom: 30px;
        text-align: center;
        font-size: 30px;
    }
    #contact .deco1 {
        width: 192px;
        left: calc(50% - 40vw);
        top: -40px;
    }
    #contact .tel {
        padding: 22px 0;
        margin-bottom: 20px;
        width: 740px;
        margin: 0 auto 81px;
    }
    #contact .tel dt {
        font-size: 36px;
        margin-bottom: 20px;
        line-height: 66px;
    }
    #contact .tel dt .tel-icon {
        font-size: 65px;
    }
    #contact .tel dd {
        font-size: 20px;
        line-height: 30px;
        letter-spacing: -2px;
    }
    #contact .group {
        margin-bottom: 50px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0 120px 86px;
    }
	#contact .group .col1:hover,#contact .group .col2:hover{
		opacity: 0.8;
	}
    #contact .group .icon-line {
           width: 65px;
			align-self: center;
			margin-right: 60px;
    }
    #contact .group .line {
        margin: 0;
        width: 360px;
    }
    #contact .group .line dd {
        margin-left: 50px;
        width: 130px;
    }
    #contact .group .web {
        margin-bottom: 0;
        margin: 0;
    }
    #contact .group .web dd {
        width: 131px;
        margin-left: 70px;
    }
    #contact .slider-bottom li {
        font-size: 200px;
    }
}


@-webkit-keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}
@keyframes backInRight {
    0% {
        -webkit-transform: translateX(2000px) scale(.7);
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
    80% {
        -webkit-transform: translateX(0) scale(.7);
        transform: translateX(0) scale(.7);
        opacity: .7
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}
.backInRight {
    -webkit-animation-name: backInRight;
    animation-name: backInRight
}