@charset "utf-8";
/* CSS Document */
.toppage header .sns_links {
    left: 5%;
    top: 58px;
}
.pager li a {
    background-color: #222;
    border-radius: 28px;
}
.pager li a {
    height: 60px;
    line-height: 60px;
    border-radius: 28px;
}
.pager li:not(.prev) a, .pager li:not(.next) a {
    width: 80px;
}
.pager li a:hover {
    background-color: #d1ad00;
}
.under header .sns_links {
    display: inline-block;
    position: absolute;
    right: 27%;
    top: 69%;
    z-index: 2;
}
.under #header {
    background-position: 50%;
    background-size: cover;
    height: 32vw;
}
header .sns_links li + li {
	margin-left: 30px;
}
header .sns_links li:first-of-type {
margin-top: 40px;	
}
header .sns_links:before {
    position: absolute;
    content: "";
    display: block;
    left: -48px;
    top: -26px;
    width: 200px;
    height: 50px;
    background-image: url("../img/title_snslink.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.under #header:before {
    position: absolute;
    content: "";
    display: block;
    left: 0px;
    bottom: 0px;
    width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 12%);
}
.under #header:after {
    position: absolute;
    content: "";
    display: block;
    left: 0px;
    bottom: -1px;
    width: 100%;
    padding-top: 21vw;
    background-image: url("../img/pagetitle_frame.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 50% 100%;
}
.under_illust1 {
    max-width: 350px;
    top: 54%;
    right: 2%;
    z-index: 1;
    width: 18%;
}
.under header:before {
    content: "";
    display: block;
    width: 450px;
    height: 300px;
    position: absolute;
    top: 12%;
    right: -5%;
    background-image: url(../img/asiato.png);
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: contain;
    z-index: 2;
	pointer-events: none;
}
.under header:after {
    content: "";
    display: block;
    width: 350px;
    height: 300px;
    position: absolute;
    bottom: -50px;
    left: 5%;
    background-image: url(../img/asiato.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: contain;
    z-index: 2;
}
.under main {
    background-image: url(../img/asiato.png), url(../img/asiato.png);
    background-repeat: no-repeat;
    background-position: 100% 30%, 0 60%;
    background-size: 320px;
}
.under .cms_wrap, #page07, #page08, #page09, #page10 {
    background: rgb(163 137 104 / 62%);
}
.text_r {
    color: #222222;
    opacity: 0.1;
    white-space: nowrap;
    font-size: 8.8vw;
    height: 162px;
    overflow: hidden;
    transform-origin: top left;
    transform: rotate(90deg);
    position: absolute;
    top: 0;
    left: 99vw;
    line-height: 0.6;
    pointer-events: none;
}
.text_r .mq {
   animation: mqscroll 25s linear infinite;
    display: inline-block;
}
@keyframes mqscroll {
    0% {
        transform: translateX(4px);
    }
    100% {
        transform: translateX(-100%);
    }
}
.sns_links li a {
    max-width: 34px;
	display: block;
}
.swiper-pagination-fraction {
    width: 249px!important;
    height: 224px;
    background-image: url(../img/counter_bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    /* padding-bottom: 2%; */
}
.swiper-pagination-total {
	font-size: 2vw;
}
#main_img .swiper-pagination-current {
    font-size: 145px;
    line-height: 1.45;
}
.more  {
	margin-right: 0;
margin-left: auto;
}
.more a{border-radius: 100px;overflow: hidden;
}
.more a span:first-of-type{z-index: 2;position: relative;}
.more a span.posi_abs{width: 100%;height: 100%;transform: translateY(-100%);top: 0;left: 0; transition: ease 0.3s;z-index: 1;}
.more a:hover span.posi_abs{transform: translateY(0);}
.btn {
    display: block;
    position: relative;
}
.btn-inner {
    display: inline-block;
    position: relative;
    color: #1a1400;
    top: 0;
    padding-bottom: 16px;
	transition: all 0.3s;
}
.btn-inner:before {
    content: "";
    top: -8px;
    left: -30px;
    position: absolute;
    z-index: 10;
    border-radius: 78px 66px 100px 50px/50px 50px 50px 50px;
    display: block;
    background: #fff;
    transform: rotate(4deg);
    height: 90px;
    width: 210px;
}
.btn-inner:after {
    transition-property: top;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    content: "";
    top: 8px;
    left: -30px;
    position: absolute;
    z-index: 9;
    border-radius: 78px 66px 100px 50px/50px 50px 50px 50px;
    display: block;
    background: #edc10a;
    transform: rotate(4deg);
    width: calc((125vw - 0vw * 2) / 120 * 14);
    height: 90px;
    width: 210px;
}
.btn-inner:hover {
    opacity: 1 !important;
    top: 16px;
}
.btn-inner:hover:after {
    top: -8px;
}

.btn-inner span {
    color: #1a1400;
    font-size: 1.2rem;
    display: block;
    position: relative;
    z-index: 11;padding-top: 20px;
}
#main_img:before {
    content: "";
    display: block;
    width: 500px;
    height: 300px;
    position: absolute;
    top: -180px;
    right: 0;
    background-image: url(../img/asiato.png);
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: contain;
	z-index: 2;
}
.scroll-rotate {
    position: absolute;
    z-index: 0;
    transition: all 0.5s;
    width: 300px;
    left: -80px;
    top: -84px;
    opacity: 0.2;
}

.tori1 {
    position: absolute;
    top: -17%;
    left: -1%;
    max-width: 298px;
    z-index: 3;
}
.tori2 {
    position: absolute;
    bottom: -15%;
    right: -3%;
    max-width: 250px;
    z-index: 3;
}
.svg_box {
    right: 5%;
    bottom: -97px;
    width: 400px;
    height: 300px;
}
.svg_box .dec {
    opacity: 0;
}
.dec {
	width: 40px;
}
#dec1 {
	right: 0;
	top: 0;
}
#dec2 {
    right: 20%;
    top: 10%;
}
#dec3 {
    right: 16%;
    top: 30%;
}
#dec4 {
    right: 40%;
    top: 30%;
}
#dec5 {
    right: 41%;
    top: 62%;
}
#dec6 {
	right: 70%;
	top: 80%;
}
#dec7 {
    right: 80%;
    top: 100%;
}
#dec8 {
	right: 100%;
	top: 100%;
}

.topcms_box .cms_wrap {
	margin-top: 80px;
}
.topcms_box .cms_title {
	/*font-size: 115px;*/
}
.topcms_box .cms_title h3 img, #top_info h2 img {
    max-height: 100px;
    max-width: 100%;
    width: auto;
}
#top_info h2 img {
	max-height: 75px;
}
.topcms_news_type2 .cate_box {
	width: 46.33333%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}
.topcms_news_type2 .box_img1 {
	border-radius: 10px;
}
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}
/* -------------------------------------------------------------------------------------*/

#top_about {
	background: #ab9273;
    background: url(../img/bg_wood.jpg);
	background-size: 300px;
}
#top_about h2 {
    max-width: 620px;
}
#top_menu .next.slick-arrow {
    position: absolute;
    top: -140px;
    right: 35px;
    cursor: pointer;
}
#top_menu .next.slick-arrow:active {
animation: button 1.5s 1; 
}
#top_menu .slick-counter {
	display: none;
}
@keyframes button {
    0%{
      transform: translateY(0px)
    }
    5%{
      transform: translateY(8px)
    }
    100%{
      transform: translateY(0px)
    }
}
#top_menu h3 {
    transform: translateY(-80px);
}
#top_menu .txt_box {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 1;
}
#top_menu .cate_box a:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 41%;
    background: #212121;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgb(0 0 0 / 67%) 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

#top_photo {
    background-image: url(../img/colk.png);
    background-size: 350px;
}
.photo1 img, .photo2 img, .photo3 img, .photo4 img, .photo5 img {
    box-shadow: 5px 7px 7px 0px rgb(0 0 0 / 17%);
}
.photo1 {
	margin: 0 auto;
    width: calc((100vw - 0vw * 2) / 120 * 37);
    margin-top: calc((100vw - 0vw * 2) / 120 * 5);
	position: relative;
}
.photo1:before {
    content: "";
    display: block;
    left: -8%;
    top: -8%;
    background-image: url("../img/tape2.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 135px;
    padding-bottom: 34%;
    position: absolute;
    z-index: 0;
}
.photo1:after {
    content: "";
    display: block;
    left: -6%;
    bottom: -6%;
    background-image: url("../img/tape3.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 190px;
    padding-bottom: 21%;
    position: absolute;
    z-index: 0;
}
.photo2 {
    position: absolute;
    top: 0px;
    transform: rotate(-3deg);
	width: calc((100vw - 0vw * 2) / 120 * 30);
}
.photo2:before {
    content: "";
    display: block;
    left: 46%;
    top: -12%;
    background-image: url("../img/pin1.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 57px;
    padding-bottom: 15%;
    position: absolute;
    z-index: 0;
}
.photo3 {
    position: absolute;
    top: 0px;
    width: calc((100vw - 0vw * 2) / 120 * 30);
    right: calc((100vw - 0vw * 2) / 120 * 4);
    transform: rotate(2.00003deg);
}
.photo3:before {
    content: "";
    display: block;
    left: 46%;
    top: -9%;
    background-image: url("../img/pin3.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 45px;
    padding-bottom: 15%;
    position: absolute;
    z-index: 0;
}
.photo4 {
    position: absolute;
    bottom: 0;
    width: calc((100vw - 0vw * 2) / 120 * 30);
    left: calc((100vw - 0vw * 2) / 120 * 6);
    transform: rotate(-0.99986deg);
}
.photo4:before {
    content: "";
    display: block;
    left: 46%;
    top: -12%;
    background-image: url("../img/pin2.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 57px;
    padding-bottom: 15%;
    position: absolute;
    z-index: 0;
}
.photo5 {
    position: absolute;
    bottom: 0;
    transform: rotate(5.00022deg);
    right: calc((100vw - 0vw * 2) / 120 * 5);
	width: calc((100vw - 0vw * 2) / 120 * 30);
}
.photo5:before {
    content: "";
    display: block;
    right: -9%;
    top: -14%;
    background-image: url("../img/tape1.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 100% 0;
    width: 127px;
    padding-bottom: 21%;
    position: absolute;
    z-index: 0;
}
#top_recruit {
    background-image: url(../img/maru1.png), url(../img/maru2.png);
    background-repeat: no-repeat;
    background-size: 14%, 9%;
    background-position: 20% 22%, 47% 67%;
}
#top_info h2 {
    z-index: 1;
    right: 20px;
    top: -50px;
}

@media screen and (max-width: 1455px){
#top_about .txt_box {
    margin-left: 0;
    padding: 0;
    width: 56%;
}
	.under #header {
    height: 38vw;
}
	.sns_links li a {
    max-width: 26px;
}
	header .sns_links:before {
    left: -29px;
    top: -8px;
    width: 160px;
    height: 36px;
}
.under ul.menu {
    width: 100%;
    margin: 0;
    padding: 0;
}
.under #header nav {
    width: 66%;
    padding-right: 2%;
}
.menu li a span, .cms_title span {
    font-size: 11px;
}
.under header:after {
    width: 216px;
    height: 124px;
    bottom: -56px;
    left: 3%;
}
.under header:before {
    width: 223px;
    height: 156px;
    top: 12%;
    right: -5%;
}
}

@media screen and (max-width: 1255px){
	.info_txt {
		padding-left: 5%;
		padding-right: 5%;
	}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.dec {
    width: 48px;
	opacity: 0.9;
}
.under header .sns_links {
    right: 25%;
    top: 76%;
}
#top_recruit {
    background-size: 18%, 27%;
    background-position: 12% 61%, 86% 85%;
}
.swiper-pagination-fraction {
    width: 177px!important;
    height: 144px;
	left: 6.5%!important;
}
#main_img .swiper-pagination-current {
    font-size: 97px;
}
.swiper-container {
    width: 110%!important;
    left: 50%;
    transform: translateX(-50%);
}
#main_img:before {
    width: 350px;
    height: 173px;
}
.toppage header .sns_links {
    top: 177px;
    left: 9%;
}
.tori1 {
    top: -14%;
    left: 11%;
    max-width: 167px;
}
	.tori2 {
    right: 10%;
    max-width: 146px;
}
	.topcms_box .cms_title h3 img {
    height: 65px;
}
	#top_info h2 img {
		height: 52px;
	}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.pager li:not(.prev) a, .pager li:not(.next) a {
    width: 60px;
}
.pager li a {
    height: 40px;
    line-height: 40px;
}
.more a:hover span.posi_abs {
    transform: translateY(-100%);
}
.under_illust1 {
    top: 49%;
    right: 2%;
    width: 21%;
}
.under main {
    background-position: 100% 15%, 0 49%;
    background-size: 227px;
}
.under #header {
    height: 61vw;
}
.under header .sns_links {
    right: 13%;
    top: 84%;
}
.under header:before {
    width: 174px;
    height: 156px;
    top: 12%;
    right: -14%;
}
.under header:after {
    width: 154px;
    height: 124px;
    bottom: -52px;
    left: 3%;
}
.toppage header .sns_links {
    top: inherit;
    bottom: -75px;
    right: 6%;
    left: inherit;
    z-index: 1;
}
header .sns_links:before {
    left: -18px;
    top: -4px;
    width: 102px;
    height: 32px;
}
#main_img .swiper-pagination-current {
    font-size: 12vw;
	line-height: 1.9;
}
#main_img:before {
    width: 250px;
    height: 133px;
    top: inherit;
    bottom: -89px;
    z-index: 1;
}
#top_menu h3 {
    transform: translateY(-22px);
}
.swiper-pagination-total {
    font-size: 5vw;
}
.swiper-pagination-fraction {
    width: 106px!important;
    height: 87px;
	bottom: -7px!important;
}
	.topcms_box .cms_title {
    font-size: 52px;
}
	.topcms_box .cms_wrap {
    margin-top: 50px;
}
.svg_box {
    width: 400px;
    height: 400px;
}
.tori1 {
    top: -26%;
    left: 10%;
    max-width: 107px;
    z-index: 3;
}
.tori2 {
    right: 11%;
    max-width: 104px;
}
	.topcms_box .cms_title h3 img, #top_info h2 img {
    height: 41px;
}
	#top_menu .next.slick-arrow {
    top: -86px;
    right: 23px;
}
	.photo1 {
    width: 80%;
    margin-top: 50px;
}
	.photo2, .photo3, .photo4, .photo5 {
    width: 45%;
    position: relative;
	margin-top: 40px;
}
.photo2, .photo4 {
    left: 8px;
}
	#top_info h2 {
    right: 0;
    top: -21px;
    left: 0;
    margin: auto;
}
}