@charset "UTF-8";
/* 
	
CSS page.css */


/*
base #333
blue #005188
*/



/*//////////////////


#index


//////////////////*/

/* common */
#index #mainv.index {position: relative;height: 100vh;padding: 0 280px;box-sizing: border-box;}
#index #mainv.index .mainbox{ display: flex;align-items: center;padding: 0 6%;flex-direction: row;margin-left: -1px;height: 100%;padding-top: 200px; box-sizing: border-box; }
#index #mainv.index .mainbox .copybox{display: flex;align-items: flex-start;flex-direction: row-reverse;justify-content: flex-end;}
#index #mainv.index .mainbox .copybox p{-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;display: inline-block;text-align: left;color: #fff;font-size: 3.2rem;background: #d60a0f;display: inline-block;margin-left: 1px;letter-spacing: 0.15em;text-indent: 0.15em;padding: 25px 12px;}
#index #mainv.index .mainbox .copybox p:first-child{  background: linear-gradient(225deg, transparent 8px, #d60a0f 8px), linear-gradient(315deg, transparent 8px, #d60a0f 8px); background-position: top right, bottom right;background-size: 100% 51%; background-repeat: no-repeat; }
#index #mainv.index .mainbox .copybox p:last-child{background: linear-gradient(45deg,  transparent 8px, #d60a0f 8px), linear-gradient(135deg, transparent 8px, #d60a0f 8px);background-position: bottom left, top left;background-size: 100% 51%;background-repeat: no-repeat;padding-bottom: 5px;}
#index.en #mainv.index .mainbox .copybox p:last-child{ padding-bottom: 25px; }
#index #mainv.index .mainbox .bg{position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;object-fit: cover;font-family: 'object-fit: cover;';z-index: -1;object-position: 50% 50%;}
#index #mainv.index .mainbox .scrollbox{position: absolute;bottom: -50px;right: 35px;text-align: center;animation: arrowmove 1.6s ease-in-out infinite;}
#index #mainv.index .mainbox .scrollbox .scrolltxt{font-size: 1.4rem;letter-spacing: 0.2em;text-indent: 0.2em;color: #d60a0f;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;line-height: 1.4;margin-bottom: 8px;margin-right: 4px;}
#index #mainv.index .mainbox .scrollbox .scrollarr{ position: relative; width: 6px; height: 84px; display: inline-block; }
#index #mainv.index .mainbox .scrollbox .scrollarr svg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; }
@media screen and (max-width: 1200px) {
	#index #mainv.index { min-height: inherit; padding: 0 180px; }
	#index #mainv.index .mainbox{  padding: 0; padding-top: 150px; }
}
@media screen and (max-width: 1040px) {
	#index #mainv.index .mainbox{ padding-top: 150px; }
	#index #mainv.index .mainbox .copybox p{font-size: 2.4rem;padding: 22px 10px;}
}
@media screen and (max-width: 767px) { 
	#index #mainv.index { padding: 0 12%; }
	#index #mainv.index .mainbox{margin-left: auto;}
	#index #mainv.index .mainbox .copybox p{font-size: 1.8rem;padding: 20px 8px;}
	#index #mainv.index .mainbox .scrollbox{ right: 25px; }
	#index #mainv.index .mainbox .scrollbox .scrolltxt{font-size: 1.2rem;letter-spacing: 0.1em;text-indent: 0.1em;}
	#index #mainv.index .mainbox .scrollbox .scrollarr{width: 5px;height: 60px;}
	#index #mainv.index .mainbox .bg{ object-position: 60% 50%; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
}
@keyframes arrowmove{
	0%{bottom:-50px;}
	50%{bottom:-60px;}
	100%{bottom:-50px;}
}


#index #sec_bnr { background: url(../img/common/noizebg1.jpg); background-size: contain; padding: 120px 0; }
#index #sec_bnr ul.box_bnr { display: flex; flex-direction: row; gap:2em; justify-content: center;}
#index #sec_bnr ul.box_bnr>li { display: flex; justify-content: center; align-items: center; }
#index #sec_bnr ul.box_bnr>li a { width: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2.5em 0.5em; }
#index #sec_bnr ul.box_bnr>li a:hover { opacity: 0.6;}
#index #sec_bnr ul.box_bnr>li.rakuten { background-color: #bf0100;}
#index #sec_bnr ul.box_bnr>li.note { background-color: #241917;}
#index #sec_bnr ul.box_bnr>li .txt { color: #fff; margin-top: 20px; text-align: center; line-height:1.6; }
#index #sec_bnr ul.box_bnr>li.rakuten .logo { width: 130px; margin-top: 4px;}
#index #sec_bnr ul.box_bnr>li.note .logo { width: 195px; }
#index #sec_bnr ul.box_bnr>li.rakuten .txt { font-weight: bold; margin-top: 10px; }
#index #sec_bnr ul.box_bnr>li.note .txt span { font-size: 2.0rem; font-weight: bold; border-top: 1px solid #fff; border-bottom: 1px solid #fff; display: inline-block;}
@media screen and (max-width: 1040px) {
	#index #sec_bnr ul.box_bnr { display: flex; flex-direction: row; gap: normal; justify-content: space-between;}
	#index #sec_bnr ul.box_bnr>li { width: 48%; }
	#index #sec_bnr ul.box_bnr>li a { width: 100%; }
}
@media screen and (max-width: 767px) { 
	#index #sec_bnr ul.box_bnr { flex-direction: column; gap: 1em;}
	#index #sec_bnr ul.box_bnr>li { width: 100%; }
	#index #sec_bnr ul.box_bnr>li a { width: 100%; }
	#index #sec_bnr ul.box_bnr>li.note .txt span { font-size: 1.8rem; }
	#index #sec_bnr ul.box_bnr>li.rakuten .logo { width: 100px;}
	#index #sec_bnr ul.box_bnr>li.note .logo { width: 160px; }
}

#index #sec_1 .mainbox{ display: flex; flex-direction: row; }
#index #sec_1 .mainbox>.topcopybox{ margin-right: 18%; flex-shrink: 0; display: flex; justify-content: space-between; margin-bottom: 0; width: auto; }
#index #sec_1 .topcopybox .topcopy{-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;color: #d60a0f;font-size: 2.8rem;line-height: 2.2;letter-spacing: 0.15em;}
#index.en #sec_1 .topcopybox .topcopy{ font-size: 2rem; }
#index #sec_1 .mainbox>.topcopybox+.txtbox{ width: 100%; }
#index.en #sec_1 .mainbox>.topcopybox+.txtbox{ padding-bottom: 30px; }
#index.en #sec_1 .mainbox>.topcopybox+.txtbox p{ margin-bottom: 15px; }
#index #sec_1 #s1_insec1 { padding-top: 130px; padding-bottom: 80px; }
#index #sec_1 #s1_insec1 .titlebox{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
#index #sec_1 #s1_insec1 .titlebox .toptitlebox{ text-align: left; }
@media screen and (max-width: 1200px) {
	#index #sec_1 .topcopybox{ margin-right: 14%; padding-left: 4%; }
}
@media screen and (max-width: 1040px) {
	#index #sec_1 .mainbox{ display: block; }
	#index #sec_1 .mainbox>.topcopybox{ margin-right: 0%; display: block; }
	#index #sec_1 .topcopybox .topcopy{ -webkit-writing-mode: inherit;-ms-writing-mode: inherit;writing-mode: inherit; font-size: 1.8rem; line-height: 1.8;margin-bottom: 30px;text-align: center;}
	#index #sec_1 .topcopybox{ margin-right: 0%; padding-left: 0%; }
	#index #sec_1 #s1_insec1 { padding-top: 100px; padding-bottom: 70px; }
	#index #sec_1 #s1_insec1 .titlebox{ display: block; }
	#index #sec_1 #s1_insec1 .titlebox .toptitlebox{ text-align: center; }
	#index #sec_1 #s1_insec1 .titlebox .link{ display: none; }
	#index #sec_1 #s1_insec1 .link{ display: none; }
	#index.en #sec_1 .mainbox>.topcopybox+.txtbox{ padding-bottom: 0; }
	#index.en #sec_1 .mainbox>.topcopybox+.txtbox p:last-child{ margin-bottom: 0; }
}
@media screen and (max-width: 767px) { 
	#index #sec_1 #s1_insec1 { padding-top: 80px; padding-bottom: 55px; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
}


#index #sec_1 #s1_insec2 .imglist{ display: flex; flex-direction: row; position: relative; height: 680px; }
#index #sec_1 #s1_insec2 .imglist::before{ content: ""; background: rgba(36, 25, 23, .2); position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 2; }
#index #sec_1 #s1_insec2 .imglist>li{width: 56%;overflow:hidden;position: absolute;top: 0;bottom: 0;height: 100%;}
#index #sec_1 #s1_insec2 .imglist>li>img{ width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; }
#index #sec_1 #s1_insec2 .imglist>li:nth-child(1){ -webkit-clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%);left: 0; }
#index #sec_1 #s1_insec2 .imglist>li:nth-child(2){ -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 16% 100%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 16% 100%); right: 0; }
@media screen and (max-width: 1040px) {
	#index #sec_1 #s1_insec2 .imglist{ height: 550px; }
}
@media screen and (max-width: 767px) { 
	#index #sec_1 #s1_insec2 .imglist{ height: auto; }
	#index #sec_1 #s1_insec2 .imglist{ display: block; height: auto; }
	#index #sec_1 #s1_insec2 .imglist>li{width: 100%;height: 350px; position: relative;}
	#index #sec_1 #s1_insec2 .imglist>li:nth-child(1){-webkit-clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);left: auto;margin-bottom: -70px;}
	#index #sec_1 #s1_insec2 .imglist>li:nth-child(2){ -webkit-clip-path: polygon(0 18%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0 18%, 100% 0%, 100% 100%, 0% 100%); }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
	#index #sec_1 #s1_insec2 .imglist>li{height: 250px;}
}

#index #sec_1 #s1_insec3{ padding-top: 90px; padding-bottom: 80px; }
#index #sec_1 #s1_insec3 .topcopybox{ margin-right: 12%; }
#index #sec_1 #s1_insec3 .link{ text-align: center; margin-top: -10px; }
@media screen and (max-width: 1040px) {
	#index #sec_1 #s1_insec3 .link{ margin-top: 40px; }
	#index #sec_1 #s1_insec3 .topcopybox{ margin-right: 0; }
}
@media screen and (max-width: 767px) { 
	#index #sec_1 #s1_insec3{ padding-bottom: 60px; padding-top: 60px; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
}

#index #sec_2 #s2_insec1{ background: url(../img/common/noizebg1.jpg); background-size: contain; padding-top: 80px; padding-bottom: 130px;  }
#index #sec_2 #s2_insec1 .txtbox{ display: flex; flex-direction: row; margin-bottom: 50px; }
#index #sec_2 #s2_insec1 .txtbox .txt{ width: 100%; display: flex; align-items: center; }
#index #sec_2 #s2_insec1 .txtbox .link{ display: flex; align-items: center; flex-shrink: 0; margin-left: 6%; }
#index #sec_2 #s2_insec1 .imglist{ display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
#index #sec_2 #s2_insec1 .imglist>li{width: 18.2%;}
#index #sec_2 #s2_insec1 .imglist>li._1{flex-shrink: 0;width: 31.8%;}
#index #sec_2 #s2_insec1 .imglist>li>img{ width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; }
@media screen and (max-width: 1040px) {
	#index #sec_2 #s2_insec1{ padding-bottom: 100px;  }
}
@media screen and (max-width: 767px) { 
	#index #sec_2 #s2_insec1{ padding-top: 60px; padding-bottom: 80px;  }
	#index #sec_2 #s2_insec1 .txtbox{  margin-bottom: 40px; display: block; }
	#index #sec_2 #s2_insec1 .txtbox .link{ text-align: center; margin-top: 30px; display: block; }
	#index #sec_2 #s2_insec1 .imglist>li{width: 36.4%;}
	#index #sec_2 #s2_insec1 .imglist>li._1{flex-shrink: 0;width: 63.6%;}
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
	#index #sec_2 #s2_insec1{ padding-top: 60px; padding-bottom: 60px;  }
}

#index #sec_3{ padding: 110px 0 80px; }
#index #sec_3 .txtbox{ display: flex; flex-direction: row; margin-bottom: 50px; }
#index #sec_3 .txtbox .txt{ width: 100%; display: flex; align-items: center; }
#index #sec_3 .txtbox .link{ display: flex; align-items: center; flex-shrink: 0; margin-left: 6%; }
@media screen and (max-width: 1040px) {
	#index #sec_3{ padding: 90px 0 80px; }
}
@media screen and (max-width: 767px) { 
	#index #sec_3{ padding: 60px 0 60px; }
	#index #sec_3 .txtbox{ display: block; margin-bottom: 50px; }
	#index #sec_3 .txtbox .txt{ display: block; }
	#index #sec_3 .txtbox .link{ display: block; text-align: center; margin-left: 0%; margin-top: 20px; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
}

#index #sec_3 .recruitbnr{ margin-top: 110px; }
@media screen and (max-width: 1040px) {
	#index #sec_3 .recruitbnr{ margin-top: 70px; }
}
@media screen and (max-width: 767px) { 
	#index #sec_3 .recruitbnr{ margin-top: 50px; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
}



/*//////////////////


#commitment


//////////////////*/

#commitment #sec_2 .mainbox{display: flex;flex-direction: row;}
#commitment.en #sec_2 .mainbox{ display: block; }
#commitment #sec_2 .mainbox .txtbox{ width: 100%; }
#commitment #sec_2 .mainbox .box1{margin-top: 30px;}
#commitment #sec_2 .mainbox .imgbox{width: 29%;margin-left: 6%;flex-shrink: 0;}
#commitment #sec_2 .mainbox .imgbox .txt{font-size: 1.4rem;margin-top: 15px;text-align: right;}
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) { 
	#commitment #sec_2 .mainbox{display: block;}
	#commitment #sec_2 .mainbox .box1{margin-top: 30px;}
	#commitment #sec_2 .mainbox .imgbox{max-width: 286px; width: 70%;margin-left: auto;margin-right: auto;margin-top: 30px;}
	#commitment #sec_2 .mainbox .imgbox .txt{ font-size: 1.2rem; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
}

#commitment #sec_3 .img{ margin: 30px 0; }
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) { 
	#commitment #sec_3 .img{ margin: 25px 0; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
}



/*//////////////////


#shop


//////////////////*/

#shop #mainv.under .bg{object-position: 60% 10%;}

#shop #sec_2 .sectitle{ margin-bottom: 15px; }
#shop #sec_2 .txt{ text-align: center; }
#shop #sec_2 .map{ margin-top: 35px; height: 560px; }
@media screen and (max-width: 1040px) {
	#shop #sec_2 .map{ height: 480px; }
}
@media screen and (max-width: 767px) { 
	#shop #sec_2 .map{ height: 380px; margin-top: 25px; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
	#shop #sec_2 .map{ height: 300px; }
}



/*//////////////////


#recruit


//////////////////*/

#recruit #sec_1 .list{ margin-top: 45px; }
#recruit #sec_1 .list>li{background: #f8f8f8;margin-bottom: 15px;padding: 30px 6%;}
#recruit #sec_1 .list>li:last-child{ margin-bottom: 0; }
#recruit #sec_1 .list>li>dl{ display: flex; flex-direction: row; }
#recruit #sec_1 .list>li>dl>dt{flex-shrink: 0;display: flex;align-items: center;width: 230px;padding-right: 20px;box-sizing: border-box;font-size: 2rem;color: #d60a0f;letter-spacing: 0.1em;text-indent: 0.1em;line-height: 1.8;}
#recruit #sec_1 .list>li>dl>dd{ display: flex; align-items: center; }
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) { 
	#recruit #sec_1 .list>li{padding: 20px 8%;}
	#recruit #sec_1 .list>li>dl{ display: block; }
	#recruit #sec_1 .list>li>dl>dt{display: block;width: 100%;padding-right: 0;font-size: 1.8rem;margin-bottom: 5px;text-align: center;}
	#recruit #sec_1 .list>li>dl>dd{ display: block; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
	#recruit #sec_1 .list>li>dl>dt br.middlehide{ display: block !important; }
}

#recruit #sec_2 .list{ margin-left: -40px; display: flex; flex-direction: row; margin-top: 45px; }
#recruit #sec_2 .list>li{background: #f8f8f8;padding: 30px 6%;margin-left: 40px; box-sizing: border-box; width: calc(50% - 40px);}
#recruit #sec_2 .list>li>dl>dt{font-size: 2rem;color: #d60a0f;letter-spacing: 0.1em;text-indent: 0.1em;line-height: 1.8;margin-bottom: 10px;text-align: center;}
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) { 
	#recruit #sec_2 .list{ margin-left: 0; display: block; }
	#recruit #sec_2 .list>li{margin-left: 0;margin-bottom: 15px;width: 100%;padding: 20px 8%;}
	#recruit #sec_2 .list>li:last-child{ margin-bottom: 0; }
	#recruit #sec_2 .list>li>dl>dt{ font-size: 1.8rem; margin-bottom: 5px; }
}
@media screen and (max-width: 639px) { 
}
@media screen and (max-width: 500px) { 
}

#recruit #sec_3 .txt{ text-align: center; }
#recruit #sec_3 .list{ margin-top: 30px; }
#recruit #sec_3 .list>li{ padding-bottom: 15px; position: relative; }
#recruit #sec_3 .list>li:before{ content: "";width: 0; height: 0; border-style: solid; border-width: 12px 14px 0 14px; border-color: #d60a0d transparent transparent transparent; display: inline-block; position: absolute; bottom: 3px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
#recruit #sec_3 .list>li:last-child{ padding-bottom: 0; }
#recruit #sec_3 .list>li:last-child:before{ content: none; }
#recruit #sec_3 .list>li>dl{ display: flex; flex-direction: row; }
#recruit #sec_3 .list>li>dl>dt{background: #d60a0f;color: #fff;font-size: 2rem;letter-spacing: 0.1em;text-indent: 0.1em;line-height: 1.8;flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 30%;padding: 30px 3%;box-sizing: border-box;}
#recruit #sec_3 .list>li>dl>dd{ background: #f8f8f8; display: flex; justify-content: center; flex-direction: column; width: 100%; padding: 25px 35px; text-align: left; }
#recruit #sec_3 .list>li>dl .box1{ background: #fff; padding: 20px 30px; margin-top: 20px; }
#recruit #sec_3 .link{padding-left: 6%;padding-right: 6%;margin-top: 60px;}
@media screen and (max-width: 1040px) {
	#recruit #sec_3 .list>li>dl{ display: block; }
	#recruit #sec_3 .list>li>dl .box1{ padding: 20px 8%; }
	#recruit #sec_3 .list>li>dl>dt{ font-size: 1.8rem; display: block; width: 100%;padding: 10px 8% 5px; text-align: center; }
	#recruit #sec_3 .list>li>dl>dd{ padding: 20px 8%; display: block; box-sizing: border-box; }
}
@media screen and (max-width: 767px) { 
	#recruit #sec_3 .txt{ text-align: left; }
}
@media screen and (max-width: 639px) { 
	#recruit #sec_3 .list>li>dl>dt .tablethide{ display: block !important; }
}
@media screen and (max-width: 500px) { 
	#recruit #sec_3 .list>li>dl>dt{ font-size: 1.6rem; }
}