@charset "utf-8";
/* CSS Document */
#main-visual{width: 100%; overflow: hidden; position: relative; margin: 0 0 15px; }
#main-visual p{
	position: absolute;
	left: 0;
	width: 100%;
	top: calc(50% - 0.7em);
	font-size: 30px;
	color: #fff;
	text-align: center;
	z-index: 1000;
	text-shadow: 0 0 1px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.4), 0 0 4px rgba(0,0,0,.4), 0 0 5px rgba(0,0,0,.4), 0 0 6px rgba(0,0,0,.4), 0 0 7px rgba(0,0,0,.4), 0 0 8px rgba(0,0,0,.4), 0 0 9px rgba(0,0,0,.4), 0 0 10px rgba(0,0,0,.4), 0 0 11px rgba(0,0,0,.4), 0 0 12px rgba(0,0,0,.4), 0 0 13px rgba(0,0,0,.4), 0 0 14px rgba(0,0,0,.4), 0 0 15px rgba(0,0,0,.4), 0 0 16px rgba(0,0,0,.4), 0 0 17px rgba(0,0,0,.4), 0 0 18px rgba(0,0,0,.4), 0 0 19px rgba(0,0,0,.4), 0 0 20px rgba(0,0,0,.4), 0 0 21px rgba(0,0,0,.4), 0 0 22px rgba(0,0,0,.4), 0 0 23px rgba(0,0,0,.4), 0 0 24px rgba(0,0,0,.4);
}
.kv50{
	background-image: url(../../images/top/main_50.jpg);
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: cover;
    padding: 80px 10px 50px;
    margin-bottom: 50px;
}
.kv50 a{max-width: 500px; display: block; margin: auto}

#top h2{text-align: center; margin: 0 0 60px;}
#top h2 span{font-size: 13px; font-weight: bold; display: block; padding: 10px 0 0 0;}

#topics{position: relative; margin: 0 0 80px; font-weight: bold;}
#topics:before{position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 320px; z-index: -1; background: #e84709;}
#topics-slider{width: 100%; overflow: hidden;}
#topics-slider .slick-slide{box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); width: 440px; margin: 0 90px 0 0;}
#topics-slider .inner{background: #fff; padding: 20px 30px 30px;background-color: #f7f7f7;}
#topics-slider figure{overflow: hidden; height: 250px; background-color: #fff;;text-align: center;}
#topics-slider figure img{ transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;height: 100%;}
#topics-slider .date{color: #e84709;}
#topics-slider .txt{font-size: 16px; line-height: 1.5;min-height: 100px;}
#topics-slider .new { display: inline-block; background: #c00; color: #fff; font-size: 10px; font-weight: bold; padding: 0.2em 0.5em; margin: 0 0 0 1em; vertical-align: text-bottom; line-height: 1;}
#topics-slider a:hover figure img{transform: scale(1.05); -webkit-transform: scale(1.05);}
#topics-slider a:hover .inner{background: #f3f3f3;}
#topics .btn{padding: 45px 0; text-align: center; color: #fff;}
#topics .btn a{position: relative;}
#topics .btn i{width: 83px; height: 1px; background: #fff; position: relative; display: inline-block; vertical-align: middle; margin: 0 0 0 0.5em; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;}
#topics .btn i:before{content: ''; position: absolute; right: 0; top: -4px; width: 9px; height: 1px; background: #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
#topics .btn a:hover i{width: 120px;}

#business{padding: 0 0 0 40.6%; position: relative; margin: 0 0 200px;}
#business .box-cont{position: absolute; top: 50%; left: 0; width: 40.6%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
#business .box-cont .inner{max-width: 510px; margin: 0 auto; width: 90%;}
#business .box-cont h2{text-align: left; margin: 0 0 25px;}
#business .box-cont .txt{font-size: 16px; line-height: 2.1;}

#business-slider .slide{position: relative;}
#business-slider .slide.white{color: #fff;}
#business-slider .inner{position: absolute; left: 8.8%; bottom: 11%; font-size: 15px; font-weight: bold; z-index: 10; }
#business-slider .inner .tit{margin: 0 0 2%; width: 55.1%; line-height: 1;}
#business-slider .inner .tit2{margin: 0 0 2.5%;}
#business-slider .inner .txt{font-weight: normal; width: 40%; line-height: 1.5; margin: 0 0 3.5%;}
#business-slider .inner .txt.international{ width: 60%;}

#business-slider .bgInternational .tit,#business-slider .bgInternational .txt{background: hsla(0,0%,91%,0.80); padding: 30px 30px 30px 0; display: inline-block; }
#business-slider .inner  .bgInternational .tit2{margin: 0 0 0;}

#business-slider .inner .btn i{width: 83px; height: 1px; background: #969596; position: relative; display: inline-block; vertical-align: middle; margin: 0 0 0 0.5em; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;}
#business-slider .inner .btn i:before{content: ''; position: absolute; right: 0; top: -4px; width: 9px; height: 1px; background: #969596; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
#business-slider a:hover .btn i{width: 120px;}
#business-slider a:hover{opacity: .9;}

#business-slider .inner2{position: absolute; left: 56%; bottom: 4%;}
#business-slider .inner2 .txt{font-size: 12px; line-height: 1.5;}
#business-slider .inner2 .txt2{line-height: 1.4;}
#business-slider .inner2 figure{margin: 2% 0 4%; line-height: 1;}

#business-slider .slick-arrow{width: 26px; height: 51px; bottom: 0;}
#business-slider .slick-next{left: -55px; background: url("../../images/top/business_next.png") no-repeat top left/100% auto;}
#business-slider .slick-prev{left: -135px; background: url("../../images/top/business_prev.png") no-repeat top left/100% auto;}

#company{margin: 0 0 200px;}
#company .list{position: relative; padding: 0 2.5%; text-align: center; display: flex; justify-content: center;}
#company .list:before{position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 320px; z-index: -1; background: #e84709;}
#company .list li{margin: 0 50px 0 0;}
#company .list li:last-of-type{margin: 0;}
#company .list figure{overflow: hidden;}
#company .list figure img{transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;}
#company .list a:hover figure img{transform: scale(1.05); -webkit-transform: scale(1.05);}
#company .list p{padding: 20px 0 50px; font-size: 18px; font-weight: bold; color: #fff;}

#info{margin: 0 auto 100px; }
#info .content{padding: 20px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;max-height: 300px; overflow-y: scroll; max-width: 1000px; margin: auto;}
#info .scrollbar-inner {overflow: auto; overflow-x: hidden; padding: 0 2%;}
#info li{border-bottom: 1px dashed #ccc; padding: 25px 0; display: flex; flex-wrap: wrap;}
#info li:last-child{border-bottom:none !important;}
#info li time {flex-basis: 150px; text-align: center; font-weight: bold;}
#info li p {flex-basis: calc(100% - 200px);}
#info li a { color: #e84709; text-decoration: underline;}

/* ��ʕ���768px�ȏ�̏ꍇ */
@media screen and (min-width: 768px) {
  #pickup {
    max-width: 1040px;
    margin: 0 auto 80px;
    padding: 10px;
  }

  #pickup ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #pickup ul li {
    width: 48%; /* 2�񃌃C�A�E�g */
    margin-bottom: 50px;
  }

  #pickup ul li a:hover {
    opacity: 0.8;
  }
}

/* ��ʕ���768px�ȉ��̏ꍇ */
@media screen and (max-width: 768px) {
  #pickup ul {
    display: flex;
    flex-direction: column; /* �c���тɂ��� */
    align-items: center; /* ���������ɂ���i�C�Ӂj */
  }

  #pickup ul li {
    width: 100%; /* ���X�g���ڂ𕝂����ς��ɂ��� */
    margin-bottom: 10px; /* ���X�g�Ԃ̗]����lj��i�C�Ӂj */
  }

  #pickup ul li a img {
    width: 100%; /* �摜�𕝂����ς��ɂ��� */
    height: auto; /* �摜�̏c�����ۂ� */
  }
}


.japanBrand{font-weight: bold;margin:0 auto 100px; text-align: center; max-width: 900px;}
.japanBrand figure{ margin-bottom: 0px; }

.japanBrand .ooita{margin-bottom: 5px; text-align: center;padding-bottom: 20px; }
@media screen and (min-width: 768px) {
	.japanBrand .ooita_logo{ text-align: center; width: 100%;}
	.ooita_logo_jpg{ width: 60%;}
}
@media screen and (max-width: 768px) {
	.japanBrand .ooita_logo{ text-align: center; }
	.ooita_logo_jpg{ width: 100%;}
}


/* ============== Media =============== */
@media only screen and (max-width: 1500px){
#business .box-cont .txt{line-height: 1.5;}

#business-slider .inner{font-size: 1.0vw;}
#business-slider .inner .txt{line-height: 1.5;}

#business-slider .inner2 .txt{font-size: 0.8vw;}
#business-slider .inner2 .txt2{font-size: 0.95vw;}
#business-slider .inner2 figure{width: 7.3vw;}
}

@media only screen and (max-width: 1100px){
#main-visual p{font-size: 4vw;}
    
#business-slider .inner .btn i{width: 12%;}
#business-slider a:hover .btn i{width: 16%;}
#business-slider .slick-arrow{bottom: -70px;}
#business-slider .slick-next{left: 100px;}
#business-slider .slick-prev{left: 0px;}

#company .list:before{height: 30vw;}
#company .list li{margin: 0 3% 0 0;}
}

@media only screen and (max-width: 767px){
#main-visual{margin: 0 0 20px;height: auto;}    
#main-visual p{font-size: 4.8vw; text-shadow: 0 0 1px rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.4), 0 0 3px rgba(0,0,0,.4), 0 0 4px rgba(0,0,0,.4), 0 0 5px rgba(0,0,0,.4), 0 0 6px rgba(0,0,0,.4), 0 0 7px rgba(0,0,0,.4), 0 0 8px rgba(0,0,0,.4), 0 0 9px rgba(0,0,0,.4), 0 0 10px rgba(0,0,0,.4), 0 0 11px rgba(0,0,0,.4), 0 0 12px rgba(0,0,0,.4), 0 0 13px rgba(0,0,0,.4), 0 0 14px rgba(0,0,0,.4);}
/*#main-visual img{height: 82.5vw;}*/

#top h2{margin: 0 0 40px;}
    
#topics{margin: 0 0 100px;}    
#topics-slider .slick-slide{width: auto; margin: 0 3vw;}
#topics-slider .slick-arrow{width: 3.8vw; height: 13.5vw; top: 20vw;}
#topics-slider .slick-next{right: 0; background: url("../../images/top/topics_next.png") no-repeat top left/100% auto;}
#topics-slider .slick-prev{left: 0; background: url("../../images/top/topics_prev.png") no-repeat top left/100% auto;}
#topics .btn{padding: 25px 0;}

#business{padding: 0; margin: 0 0 100px;}    
#business .box-cont{position: static; width: 100%; margin: 0 auto 30px; transform: translateY(0); -webkit-transform: translateY(0);}
#business .box-cont .inner{max-width: 767px;}
#business .box-cont h2{text-align: center;}

#business-slider{width: 98%; margin: 0 0 0 2%;}    
#business-slider .inner{font-size: 1.9vw; left: 5%; bottom: 8%;}

#business-slider .inner2 .txt{font-size: 1.5vw;}
#business-slider .inner2 .txt2{font-size: 1.7vw;}
#business-slider .inner2 figure{width: 12vw;}

#company{margin: 0 0 100px;}
#company .list{padding: 0 4% 0 8%; flex-wrap: wrap;}
#company .list:before{width: 20%; height: 100%;}
#company .list li{width: 100%; padding: 5vw 0; position: relative;}
#company .list li:after{content: ''; position: absolute; bottom: 0; right: 0; left: 12vw; height: 1px; background: #f3a384;}
#company .list li:last-of-type{margin: 0 0 5vw;}
#company .list a{display: flex; align-items: center; justify-content: space-between;}
#company .list figure{width: 38%;}
#company .list p{padding: 0; font-size: 4vw; color: #000; width: 54%; text-align: left;}

#info{margin: 0 0 50px;}
#info li p:nth-of-type(1){width: 95%; text-align: left;}
#info li p:nth-of-type(2){width: 95%;}
	
#info li{border-bottom: 1px dashed #ccc; padding: 10px 0; display: flex; flex-wrap: wrap;}
#info li time {display: block; flex-basis: 100%;text-align: left;}
#info li p {flex-basis: 100%;}

.japanBrand{text-align: left;padding: 15px;}
.japanBrand br{display: none;}
.japanBrand figure{ margin-bottom: 0px; width: 100%; text-align: center;}
.japanBrand .ooita{text-align: left;}
	#topics-slider .txt{font-size: 3.5vw;}
#topics-slider figure{display: flex; align-items: center; justify-content: center}
#topics-slider figure img{height: auto;}

	
}

@media only screen and (max-width: 480px){
#topics-slider .inner{padding: 10px 20px 20px;}
}

.bnrOriginalDrip{max-width: 750px; margin: 0 auto 80px;padding: 10px;text-align: center;}
@media only screen and (max-width: 768px){
	.bnrOriginalDrip{max-width: 518px; }
}

.notice{text-align: left; background-color: #f2f2f2; padding: 40px;}



@media only screen and (min-width: 769px){
	a.link-btn {
	    position: absolute;
	    top: 55%;
	    left: 8%;
	    background-color: #e74930;
	    color: #ffffff;
	    font-size: 1.3rem;
	    padding: 1% 10.55%;
	    border-radius: 35px;
	    font-family: serif;
	    text-align: center;
	    white-space: nowrap; /* �e�L�X�g���܂�Ԃ���Ȃ��悤�ɂ��� */
	}
}
@media only screen and (max-width: 768px){
    a.link-btn {
	    position: absolute;
        top: 85%;
        left: 9%;
	    background-color: #e74930;
	    color: #ffffff;
	    font-size: 1.3rem;
	    padding: 1% 10.55%;
	    border-radius: 35px;
	    font-family: serif;
	    text-align: center;
    }
}