@charset "utf-8";
/* CSS Document */
.top-slider-area,.slider{ margin-bottom: 40px; width: 100%;}
.slider,.slider li{ position: relative;}
.slider::before,.slider::after{ background-color: rgba( 255, 255, 255, .6); content: ""; height: 100%; position: absolute; top: 0; width: 20%; z-index: 1;}
.slider::before{ left: 0;}
.slider::after{ right: 0;}
.top-slider-area .slider img{ display: block; height: auto; width: 100%;}
.slider li .title-area{ color: #289404; left: 30px; position: absolute; top: 30px;}
.slider li .title-area .small-text{ font-size: 26px; line-height: 40px; margin-bottom: 0; text-align: left;}
.slider li .title-area .big-text{ font-size: 40px; line-height: 46px; margin-bottom: 0; text-align: left; text-shadow: 3px 3px 0 rgba( 255, 255, 255, 1);}
.slider li .title-area .big-text.no-text-shadow{ text-shadow: inherit !important;}
.slider li .title-area .small-text.black,.slider li .title-area .big-text.black{ text-shadow: 3px 3px 0 rgba( 0, 0, 0, 1) !important;}
.slider li .title-area .small-text.blue,.slider li .title-area .big-text.blue{ text-shadow: 3px 3px 0 rgba( 0, 132, 255, 1) !important;}
.slider li .title-area a{ background-color: rgba( 255, 255, 255, .8); border: 5px solid #289404; display: inline-block; font-weight: bold !important; margin-top: 10px !important; padding: 12px;}
.slider li .title-area.furniture-subscription a{ background-color: rgba( 0, 0, 0, .2) !important;}
.slider li .title-area.furniture-subscription a:hover{ color: #ffffff !important;}
.slider li .title-area a.black{ background-color: rgba( 0, 0, 0, .6);}
.slider li .title-area a.blue{ background-color: rgba( 0, 132, 255, .8);}
.slider li .title-area a:hover{ background-color: #289404; color: #ffffff; text-decoration: none;}
.slider li .title-area .english{ font-size: 30px; line-height: 25px; vertical-align: top;}
.slider li .title-area .japanese{ font-size: 26px; line-height: 25px; vertical-align: top;}
.slider li .title-area .small-japanese{ font-size: 14px; font-weight: bold; margin-left: 20px;}
.slider li .offisc-logo{ background-image: url("/images/top-page/offisc-logo-top-slider-01.png"); height: 42px; position: absolute; right: 20px; text-indent: -9999px; top: 20px; width: 143px;}
.white-color h2{ color: #ffffff !important;}
.white-color a{ border: 5px solid #ffffff !important; color: #ffffff !important;}
.white-color a:hover{ background-color: #ffffff !important; border: 5px solid #ffffff !important; color: #0084ff !important;}
.white-color a.black:hover{ color: #000000 !important;}
.white-text-shadow{ text-shadow: 3px 3px 2px rgb(255, 255, 255);}
.white-background-color{ background-color: rgba( 255, 255, 255, .8);}
.slider button{ background-color: inherit; background-image: url("/module/img/index/top-main-photo-sub-photo-01.png?update=20201013"); border: none; text-indent: -9999px; z-index: 2;}
.slider > button{ position: absolute;}
.slider .slick-arrow{ height: 50px; top: calc(50% - 25px); width: 30px;}
.slider .slick-prev,.slider .slick-next{ cursor: pointer;}
.slider .slick-prev:hover,.slider .slick-next:hover{ opacity: .4;}
.slider .slick-prev{ background-position: center 5px; left: 17.5%; z-index: 4;}
.slider .slick-next{ background-position: center -55px; right: 17.5%; z-index: 4;}

.slider .slick-dots { bottom: 30px; left: calc(50% - 443px); position: absolute; z-index: 3;}
.slider .slick-dots li{ float: left; margin-right: 10px;}
.slider .slick-dots li:last-child{ margin-right: 0;}

.slider .slick-dots li button{ bottom: 10px; box-shadow: 2px 2px 3px rgba( 0, 0, 0, .2); height: 53px; width: 102px;}
.slider .slick-dots li:first-child button{ background-position: center -120px;}
.slider .slick-dots li:nth-child(2) button{ background-position: center -180px;}
.slider .slick-dots li:nth-child(3) button{ background-position: center -240px;}
.slider .slick-dots li:nth-child(4) button{ background-position: center -300px;}
.slider .slick-dots li:nth-child(5) button{ background-position: center -360px;}
.slider .slick-dots li:nth-child(6) button{ background-position: center -420px;}
.slider .slick-dots li:nth-child(7) button{ background-position: center -480px;}
.slider .slick-dots li:nth-child(8) button{ background-position: center -540px;}
.slider .slick-dots li button::after{ background-color: #ffffff; content: ""; display: block; height: 100%; left: 0; opacity: .6; position: absolute; top: 0; width: 100%;}
.slider .slick-dots li.slick-active button{ border: 1px solid #289404; box-shadow: 2px 2px 3px rgba( 0, 0, 0, .6); pointer-events: none;}
.slider .slick-dots li.slick-active button::after{ opacity: 0;}
.slider .slick-dots li button:hover::after{ background-color: #888888;}

.slider li > a{ background-position: center top; background-repeat: no-repeat; background-size: 100%; display: block; padding-top: 53.27%; text-indent: -9999px;}
.slider li .slider-photo-01:hover,.slider li .slider-photo-02:hover,.slider li .slider-photo-03:hover,.slider li .slider-photo-04:hover,.slider li .slider-photo-05:hover,.slider li .slider-photo-06:hover,.slider li .slider-photo-07:hover{ opacity: 1 !important;}
.slider li .slider-photo-01{ background-image: url("/module/img/index/slider-photo-01.png?update=20210928");}
.slider li .slider-photo-02{ background-image: url("/module/img/index/slider-photo-02.png?update=20210928");}
.slider li .slider-photo-03{ background-image: url("/module/img/index/slider-photo-03.png?update=20210928");}
.slider li .slider-photo-04{ background-image: url("/module/img/index/slider-photo-04.png?update=20210928");}
.slider li .slider-photo-05{ background-image: url("/module/img/index/slider-photo-05.png?update=20210928");}
.slider li .slider-photo-06{ background-image: url("/module/img/index/slider-photo-06.png?update=20210928");}
.slider li .slider-photo-07{ background-image: url("/module/img/index/slider-photo-07.png?update=20210928");}
.slider li .slider-photo-08{ background-image: url("/module/img/index/slider-photo-08.png?update=20210928");}

.h2-title{ color: #289404; font-size: 22px !important; margin: 0 auto 20px; text-align: center;}
.news-topic-area{ max-height: 110px; overflow-y: auto; width: 100%;}
.news-topic-area li{ margin-bottom: 16px;}
.news-topic-area li:first-child p a span{ font-weight: bold;}
.news-topic-area li:last-child{ margin-bottom: 0;}
.news-topic-area p{ font-size: 14px;}
.news-topic-area p > span{ background-color: #000000; display: inline-block; font-size: 10px; height: 20px; line-height: 22px; transform: scale(.8,.8); text-align: center; width: 60px;}
.news-topic-area p .news{ color: #ffff00;}
.news-topic-area p .info{ color: #00eeff;}
.news-topic-area p .topic{ color: #35ff02;}
.news-topic-area a{ color: #111111 !important; display: inline-block; font-size: 14px; line-height: 22px; padding-left: 62px; position: relative;}
.news-topic-area a::before{ background-color: #000000; display: inline-block; font-size: 10px; height: 20px; left: 0; line-height: 22px; position: absolute; top: 0; transform: scale(.8,.8); text-align: center; width: 60px;}
.news-topic-area a.news::before{ color: #ffff00; content: "NEWS";}
.news-topic-area a.info::before{ color: #00eeff; content: "INFO";}
.news-topic-area a.topic::before{ color: #35ff02; content: "TOPIC";}
.news-topic-area .page{ display: block; text-decoration: underline; margin-left: 60px;}
.news-topic-area .page::after{ content: "▲"; display: inline-block; height: 14px; transform: rotate(90deg); width: 16px;}
.right-area{ margin: 10px 0 6px; text-align: right;}
.right-area .all-list{ font-size: 14px;}
.right-area .all-list::before{ content: "▲"; display: inline-block; margin-right: 6px; height: 14px; transform: rotate(90deg); width: 16px;}
.top-content-area-01 h2{ color: #289404; font-size: 40px; line-height: 50px; margin: 0 auto 30px; text-align: center;}
.top-content-area-01 h3{ color: #289404; font-size: 30px; line-height: 40px; margin: 0 auto 30px; text-align: center;}
.top-content-area-01 .photo{ background-image: url("/module/img/index/top-content-photo-01.png"); background-repeat: no-repeat; text-indent: -9999px;}
.top-content-area-01 .photo-01{ background-position: center 0; height: 250px;}
.top-content-area-01 .photo-02{ background-position: center -270px; height: 250px;}
.top-content-area-01 .photo-03{ background-position: center -540px; height: 250px;}
.top-content-area-01 .photo-04{ background-position: center -830px; height: 470px; margin-bottom: 30px;}
.top-content-area-01 .photo-05{ background-position: center -1330px; height: 242px; margin-bottom: 60px;}
.top-content-area-01 p{ font-size: 14px; line-height: 28px; text-align: justify;}
.top-content-area-01 .title-big{ font-size: 20px; font-weight: bold; margin: 20px auto; text-align: center;}
.top-content-area-01 .title-big span{ font-size: 30px;}
.top-content-area-01 .title-small{ margin: 60px auto 30px;}
.top-content-area-01 .body-normal{ margin-bottom: 40px;}
.top-content-area-01 .body-note{ font-size: 12px; line-height: 16px; margin-top: -18px; text-align: center;}
.top-content-area-01 img{ display: block; margin: 80px auto 0;}
.top-content-01 > li{ margin: 0 20px 40px; vertical-align: top; width: 414px;}
.top-content-01 > li a,.top-content-02 > li a,.top-content-03 > li a,.security-content-list-01 li a{ font-size: 16px; font-weight: bold;}
.top-content-01 > li a:hover,.top-content-02 > li a:hover,.top-content-03 > li a:hover,.security-content-list-01 li a:hover{ opacity: .6; text-decoration: none;}
.top-content-01 > li > a,.top-content-02 > li > a,.top-content-03 > li > a{ border: 3px solid #289404; color: #289404; display: block; margin-bottom: 20px; padding: 16px 0; position: relative; text-align: center;}
.top-content-01 > li > a::after,.top-content-02 > li > a::after,.top-content-03 > li > a::after{ content: "〉"; position: absolute; right: 16px; top: calc(50% - 11px);}
.top-content-02 > li > a::after{ right: 6px;}
.top-content-01 > li > .bule{ border: 3px solid #162a81; color: #162a81;}
.top-content-01 > li li{ vertical-align: top; width: calc(50% - 14px);}
.top-content-01 > li li p{ line-height: 22px; margin-top: 16px;}
.top-content-01 > li li:first-child{ margin-right: 10px;}
.top-content-01 > li li:last-child{ margin-left: 10px;}
.top-content-02 > li{ width: 450px;}
.top-content-02 > li a{ font-size: 24px; padding: 16px 40px 16px 20px !important;}
.top-content-02 > li a:after{ top: calc(50% - 17px);}
.top-content-03 > li{ width: 530px;}
.top-content-03 > li a{ display: inline-block !important; padding: 16px 60px 16px 50px !important;}
.security-content-list-01{ margin: 60px 0 100px;}
.security-content-list-01 li{ margin: 5px 10px;}
.new-safety-standard-logo-area{ border: 2px solid #000048; margin: 0 auto 100px !important; padding: 20px 40px 10px 20px; width: calc(900px - 64px);}
.new-safety-standard-logo-area:after,.license > div::after,.all-erase-data-area-01 > li dd:after,.all-erase-data-area-01 > li dd ul:after,.choose-erase-data-area-01::after,.technical-center-photo-area-01::after{ clear: both; content: ""; display: block;}
.new-safety-standard-logo-area img{ float: left; margin: 0 20px;}
.new-safety-standard-logo-area dl{ float: right; width: calc(100% - 240px);}
.new-safety-standard-logo-area dt{ border-left: 5px solid #000048; margin-bottom: 4px; padding-left: 5px;}
.new-safety-standard-logo-area dt p{ color: #000048; font-size: 18px; font-weight: bold; line-height: 24px;}
.new-safety-standard-logo-area dd{ margin-bottom: 10px;}
.new-safety-standard-logo-area dd p{ font-size: 14px; line-height: 20px; padding-left: 10px;}
@media screen and (max-width: 1139px){
.slider::before,.slider::after{ width: 10%;}
.slider .slick-prev{ left: calc(5% - 15px);}
.slider .slick-next{ right: calc(5% - 15px);}
}
@media screen and (max-width: 999px){
.slider li .title-area .small-text{ font-size: 22px; line-height: 36px;}
.slider li .title-area .big-text{ font-size: 36px; line-height: 42px;}
.slider li .title-area a{ border: 3px solid #289404; line-height: 18px;}
.slider li .title-area .english{ font-size: 26px; line-height: 21px;}
.slider li .title-area .japanese{ font-size: 22px; line-height: 21px;}
.white-color a{ border: 3px solid #ffffff !important;}
.white-color a:hover{ border: 3px solid #ffffff !important;}
}
@media screen and (max-width: 980px){
.new-safety-standard-logo-area{ width: calc(96% - 60px);}
}
@media screen and (max-width: 919px){
.slider li .title-area .small-text{ font-size: 18px; line-height: 32px;}
.slider li .title-area .big-text{ font-size: 32px; line-height: 38px;}
.slider li .title-area .english{ font-size: 22px; line-height: 17px;}
.slider li .title-area .japanese{ font-size: 18px; line-height: 17px;}
}
@media screen and (max-width: 902px){
.slider li .title-area{ left: 10px; top: 10px;}
.slider .slick-arrow{ bottom: 30px; top: inherit;}
.slider::before,.slider::after{ display: none;}
.slider .slick-dots{ left: calc(50% - 275px);}
.slider .slick-dots li button{ background-image: url("/images/top-page/top-main-photo-sub-photo-02.png"); height: 50px; width: 60px;}
.slider .slick-dots li:first-child button{ background-position: center 0;}
.slider .slick-dots li:nth-child(2) button{ background-position: center -60px;}
.slider .slick-dots li:nth-child(3) button{ background-position: center -120px;}
.slider .slick-dots li:nth-child(4) button{ background-position: center -180px;}
.slider .slick-dots li:nth-child(5) button{ background-position: center -240px;}
.slider .slick-dots li:nth-child(6) button{ background-position: center -300px;}
.slider .slick-dots li:nth-child(7) button{ background-position: center -360px;}
.slider .slick-dots li:nth-child(8) button{ background-position: center -420px;}
}
@media screen and (max-width: 778px){
.news-topic-area li{ margin-bottom: 8px;}
}
@media screen and (max-width: 776px){
.slider .slick-prev:hover,.slider .slick-next:hover{ opacity: 1;}
}
@media screen and (max-width: 699px){
.slider li .title-area a:hover{ background-color: rgba( 255, 255, 255, .8); color: #289404;}
.slider li .title-area a.blue:hover{ background-color: rgba( 0, 132, 255, .8) !important; color: #ffffff !important;}
.white-color a:hover{ color: #0084ff !important;}
.white-color a.black:hover{ background-color: rgba( 0, 0, 0, .6) !important; color: #ffffff !important;}
.slider .slick-prev:hover,.slider .slick-next:hover{ opacity: 1;}
.top-content-01 > li > a::after,.top-content-03 > li > a::after{ top: calc(50% - 9px);}
.top-content-02 > li a:after{ top: calc(50% - 13px);}
}
@media screen and (max-width: 679px){
.top-slider-area,.slider{ margin-bottom: 80px;}
.slider .slick-arrow{ bottom: -42px;}
.slider .slick-dots{ bottom: -40px; left: 0; text-align: center; width: 100%;}
.slider .slick-dots li{ display: inline-block; float: none; margin-right: 0; vertical-align: top; width: 10%;}
.slider .slick-dots li button{ background-size: 100%; height: auto; padding-top: 40%; width: 100%;}
.slider .slick-dots li.slick-active button{ padding-top: calc(40% - 2px);}
.slider .slick-dots li:nth-child(2) button{ background-position: center 14%;}
.slider .slick-dots li:nth-child(3) button{ background-position: center 28%;}
.slider .slick-dots li:nth-child(4) button{ background-position: center 42%;}
.slider .slick-dots li:nth-child(5) button{ background-position: center 56%;}
.slider .slick-dots li:nth-child(6) button{ background-position: center 69%;}
.slider .slick-dots li:nth-child(7) button{ background-position: center 83%;}
.slider .slick-dots li:nth-child(8) button{ background-position: center 97%;}
}
@media screen and (max-width: 641px){
.new-safety-standard-logo-area{ padding: 20px 30px 10px; width: calc(96% - 60px);}
.new-safety-standard-logo-area img{ float: none; margin: 0 auto 20px;}
.new-safety-standard-logo-area dl{ float: none; width: 100%;}
}
@media screen and (max-width: 591px){
.news-topic-area{ max-height: 130px;}
}
/*
@media screen and (max-width: 579px){
.slider .slick-dots{ left: calc(50% - 210px);}
.slider .slick-dots li{ margin-right: 0;}
}
*/
@media screen and (max-width: 570px){
.slider li .title-area .small-text{ font-size: 14px; line-height: 28px;}
.slider li .title-area .big-text{ font-size: 24px; line-height: 30px;}
.slider li .title-area a{ line-height: 13px; padding: 6px 12px;}
.slider li .title-area .english{ font-size: 18px; line-height: 13px;}
.slider li .title-area .japanese{ font-size: 14px; line-height: 13px;}
}
@media screen and (max-width: 546px){
.top-content-03 > li{ width: 96%;}
}
@media screen and (max-width: 470px){
.top-content-area-01 .body-note{ text-align: justify;}
.top-content-01 > li{ margin: 0 0 60px; width: 96%;}
.top-content-01 > li li{ margin: 0 0 10px !important;}
.top-content-01 > li li{ width: 100%;}
.top-content-02 > li{ width: 96%;}
.top-content-02 > li a.security{ font-size: 5vw;}
.top-content-area-01 .photo-01,.top-content-area-01 .photo-02,.top-content-area-01 .photo-03{ background-size: 130%; height: auto; padding-top: 52%;}
.top-content-area-01 .photo-02{ background-position: center 20%;}
.top-content-area-01 .photo-03{ background-position: center 41%;}
.top-content-area-01 .photo-04,.top-content-area-01 .photo-05{ background-size: 100%; height: auto; padding-top: 85%;}
.top-content-area-01 .photo-04{ background-position: center 75%;}
.top-content-area-01 .photo-05{ background-position: center 100%; padding-top: 40%;}
}
@media screen and (max-width: 468px){
.slider .slick-dots{ bottom: -38px;}
}
@media screen and (max-width: 449px){
.slider .slick-dots li button{ background-size: 100%; height: auto; padding-top: 40%; width: 100%;}
.slider .slick-dots li.slick-active button{ padding-top: calc(40% - 2px);}
}
@media screen and (max-width: 437px){
.slider li .offisc-logo{ background-size: 100%; height: 21px; right: 10px; width: 72px;}
}
@media screen and (max-width: 400px){
.slider .slick-dots{ bottom: -33px;}
}
@media screen and (max-width: 379px){
.slider li .title-area .small-japanese{ display: block; margin: 10px 0 0 !important;}
}
@media screen and (max-width: 347px){
.slider li .offisc-logo{ height: 15px; width: 52px;}
}