body{font-family: 'Noto Sans JP', sans-serif;font-size:16px; font-weight:400; line-height:1.8; color:#1A1A1A; text-align:center; letter-spacing:2px;font-feature-settings: "palt";}
@media screen and (max-width: 768px) {
body{font-size:15px;line-height:1.5; letter-spacing:1px; }
}
.global_inner{max-width:1300px; margin:0 auto; position:relative;padding: 0 20px;}
h1,h2,h3,h4,h5,h6{line-height:1;}
h1,h2,h3{font-family: "Zen Old Mincho", serif;}
h1 span,h2 span, h3 span{ font-size:17px; letter-spacing:1px; margin-bottom:20px; display:block;font-family: "Oswald", sans-serif;font-weight: 500;}
h2{font-size:3.5vw;margin-bottom:40px; letter-spacing:5px; line-height:1.4;}
.copy{font-family: 'Noto Sans JP', sans-serif;}
h3{letter-spacing:5px;}
img{width:100%; height:auto;}
a img{transition:0.4s all;}
a img:hover{transform: scale(1.10);transition:0.4s all; letter-spacing:2px;}
a img.no-zoom:hover{transform: scale(1.0);}


@media screen and (max-width: 768px) {
.global_inner{width:94%;padding: 0 3%; overflow:hidden; }
h1 span,h2 span, h3 span{margin-bottom:10px;}
h2{font-size:26px; margin-bottom:40px; }
}



/*====================
ハンバーガーメニュー
=====================*/
header{height:60px; background-color:#FFF; position:fixed;/*box-shadow: 0 8px 10px -9px #888;*/ width:100%; z-index:3;}
header .logo{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
header .logo img{height:40px; width:auto;transition:0.4s all;}
header .logo img:hover{transform: scale(1.0); opacity:0.8;transition:0.4s all;}

header ul.sub-menu{position:absolute; right:40px; top:0px; display:flex;align-items: center;}
header ul.sub-menu li{border-radius: 50% / 0 0 100% 100%;  margin-left:20px;transition:0.4s all;font-family: 'Noto Sans JP', sans-serif; }
header ul.sub-menu li:nth-child(1){background:#34b596;}
header ul.sub-menu li:nth-child(2){background:#764b2c;}
header ul.sub-menu li a{font-size:16px; color:#FFF; width:200px; height:100px;display:flex; justify-content: center;align-items: center;}
header ul.sub-menu li a img{height:24px; width:auto; padding-top:3px; margin-left:20px;}
header ul.sub-menu li a span{border-top:solid 2px #FFF;border-bottom:solid 2px #FFF;padding:10px 0; line-height:1; margin-top:-16px;    display: block;}
header ul.sub-menu li:hover{transform: scale(1.10);transition:0.4s all; }
nav {display: block;  position: fixed;  top: 0;  left: -300px;  bottom: 0;  width: 300px;	background-color:#e5e5e5;  	-webkit-overflow-scrolling: touch;  transition: all 0.5s;  z-index: 102;  opacity: 0;}
.open nav {  left: 0;  opacity: 1;  top:0px;  width:25%;box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.08);}
nav .inner {
	height: 100vh;
	display:flex;
	align-items: center;
	width: 100%;
	overflow: auto;


}
nav .inner .box{width: 100%;}
nav .inner .box .item{padding-left: 0px;}
nav .inner .box .item ul{margin-bottom:20px; }
nav .inner .box .item ul li{line-height: 1.3; font-size:16px; display: block;  overflow: hidden;   z-index:0;position: relative;    text-align: left;}
nav .inner .box .item ul li:last-child{border:none;}

nav .inner .box .item ul li:before{content:'';width: 12px;height: 0.5px;background-color: #000;display:  block;position: absolute;top: 50%;left: 5px;transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);}
nav .inner .box .item ul li a{ display:flex;justify-content: space-between;align-items: center;
padding-left:40px; padding-top:15px; padding-bottom:15px; color:#4a4a4a; position: relative;	overflow: hidden;    transition: ease .2s; border-bottom:solid 1px #4a4a4a;}
nav .inner .box .item ul li a span{position: relative;	z-index: 3;	}


nav .inner .box .item ul li a:hover{ transition: all 0.3s;}
nav .inner .box .item ul li a:before { 	content: '';position: absolute;top: 0;left: 0;z-index: 2;background:#d3cdc6;width: 100%;height: 100%;transition: transform .5s cubic-bezier(0.8, 0, 0.2, 1) 0s;transform: scale(0, 1);	transform-origin: right top;}

nav .inner .box .item ul li a:hover:before{	transform-origin:left top;	transform:scale(1, 1); z-index:-1;}

nav .inner .box .item ul li.title{font-size:18px;font-family: "Zen Old Mincho", serif;   }
nav .inner .box .item ul li.title span{display:block; margin-top:0px;font-family: "Oswald", sans-serif;letter-spacing:0px; font-size:13px; font-weight:300; margin-bottom:0px;    padding-right: 80px; }
nav .inner .box .item ul li.title:before{content:none;}
nav .inner .box .item ul li.title a:after{font-size:14px; display:block; font-weight:normal;z-index: 3; padding-left:3px; position:relative;}
nav .inner .box .item ul li:last-child{margin-bottom:0px;}


.arrow {
  position: absolute;
  display: inline-block;
  top:9px;
  right:20px; z-index:2;
  
}

.arrow::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 1px #4a4a4a;
  border-right: solid 1px #4a4a4a;
  position: absolute;
  right: 10px;
  top: 14px;
  transform: rotate(45deg);
}

@media screen and (max-width: 1300px){
.open nav {  width:35%;}
}

@media screen and (max-width: 768px) {

header .logo{left:85px;}

.open nav{width:100%;}
nav {right: -220px;    width: 220px;  }
nav .inner {
	margin: 0px;
	height:auto;
	padding-top:60px;
} 
nav .inner .box{width:90%; margin:0 auto;}
nav .inner .box .item ul{padding-bottom:10px; margin-bottom:0px; padding-top:0px;}
nav .inner .box .item ul li.title{font-size:16px;}
nav .inner .box .item ul li.title span{font-size:12px; padding-right: 40px;}
nav .inner .box .item ul li a{padding-top:10px; padding-bottom:10px; padding-left:20px;}

nav br.pc{display:none;} 
header ul.sub-menu{right:10px;top: 0px;}
header ul.sub-menu li{margin-left:10px;}
header ul.sub-menu li a{margin-left:5px; width:120px; height:60px; font-size:14px; }
header ul.sub-menu li a span{padding:5px 0;border-top: solid 1px #FFF;border-bottom: solid 1px #FFF;}
header ul.sub-menu li a img{margin-left:0px;}
.arrow {  top:5px;  right:10px; }
.arrow::before {  width: 8px;  height: 8px;  right: 10px;  top: 14px;}

}


/*============
ハンバーガーメニューのトグル
=============*/
.toggle_btn {  display: block;  position: fixed;  top: 20px;  left: 30px;  width: 30px;  height: 30px;  transition: all .5s;  cursor: pointer;  z-index: 103;}
.toggle_btn:before{content:"MENU"; position:absolute; top:-1px; right:-40px; font-size:13px; color:#4a4a4a;font-family: "Oswald", sans-serif;letter-spacing:1px;}
.toggle_btn p{font-size:12px;}
.toggle_btn span {  display: block;  position: absolute;  left: 0;  width: 30px;  height: 2px;  background-color: #4a4a4a;  border-radius: 4px;  transition: all .5s;}
.toggle_btn span:nth-child(1) {  top: 4px;}
.toggle_btn span:nth-child(2) {  top: 10px;}
.toggle_btn span:nth-child(3) {  top: 16px;}
.open .toggle_btn span {  background-color: #4a4a4a;}
.open .toggle_btn span:nth-child(1) {  -webkit-transform: translateY(10px) rotate(-315deg);  transform: translateY(10px) rotate(-315deg);top: 0px;}
.open .toggle_btn span:nth-child(2) {  opacity: 0;}
.open .toggle_btn span:nth-child(3) {  -webkit-transform: translateY(-10px) rotate(315deg);  transform: translateY(-10px) rotate(315deg);top: 20px;}

@media screen and (max-width: 768px) {
.toggle_btn{top:30px; left:20px;}
.toggle_btn:before{top:-20px; right:0px; }

}
/*============
ハンバーガーメニューのマスク
=============*/
#mask {display: none;  transition: all .5s;}
.open #mask {  display: block;  position: fixed;  top: 0;  right: 0;  width: 100%;  height: 100%;  /*background: #000;*/  opacity: .8;  z-index: 101; }



/*=======  メインビジュアル  =======*/
.kv{ position:relative;width: 100%; background:#FFF;font-family: "Zen Old Mincho", serif;}

.kv .text{position: absolute;    bottom: 0;    left: 50%;    transform: translateX(-50%);width: 500px; background:rgba(255,255,255,0.5); padding:60px 40px; font-size:14px; z-index:1;}
.kv .text h1{font-size:50px;font-family: 'Noto Sans JP', sans-serif; margin-bottom:20px; font-weight:500;}
.kv .text .copy{font-family: "Zen Old Mincho", serif; font-size:20px;margin-bottom:20px;}
.kv video{height: 100%; width:100%; overflow: hidden; object-fit:cover;}



@media screen and (max-width: 768px) {
.kv{ padding-top:60px;}
}


@media screen and (max-width: 768px) {
.kv .text{position: relative; margin-top:0px; left:unset;   transform: unset;width: 90%;padding:30px 10px; margin-left:auto; margin-right:auto;background:rgba(255,255,255,1.0); }
.kv .text h1{font-size:40px;}
.kv video{ height: 300px;}
}



/*==========================
トップ：イントロダクション
=========================*/
.top_introduction{ padding:60px 0;overflow: hidden;}
.top_introduction h2{margin-bottom:80px;}
.top_introduction .text{text-align:left;}
.top_introduction .circle_box{padding-left:10%; padding-right:10%; position:relative;}
.top_introduction .circle_box:before{ content:"";position:absolute; background:url(/wp-content/themes/masale_recruit/assets/image/top_introduction_bg1.png) no-repeat; left:-40; top:100px; width:500px; height:500px;background-size: contain;}
.top_introduction .circle_box:after{content:"";position:absolute; background:url(/wp-content/themes/masale_recruit/assets/image/top_introduction_bg2.png) no-repeat; right:-40px; bottom:15%;width:500px; height:500px;background-size: contain;background-position-x: right;}
.top_introduction .box{display:flex;justify-content: center; }
.top_introduction .box:nth-child(2){justify-content: flex-start;}
.top_introduction .box:nth-child(3){}
.top_introduction .box .item{ border-radius:50%; overflow:hidden; width:40%; height:40%;aspect-ratio: 1 / 1;justify-content: center;align-items: center;display:flex;flex-direction: column; color:#FFF;position: relative;padding:40px; min-width:400px; }
.top_introduction .box .item.item_work{background: #34b596; margin-top:200px; }
.top_introduction .box .item.item_photo{padding:0;}
.top_introduction .box .item.item_photo img{width:40vw;height:40vw; margin-top:-100px;padding:0px;min-height:500px;min-width:500px;object-fit: cover;}
.top_introduction .box .item.item_environment{background: #764b2c; margin-top:60px; margin-right:40px;}
.top_introduction .box .item.item_career{background: #764b2c; margin-top:-120px; }
.top_introduction .box .item.item_about{background: #34b596;margin-top:-100px; margin-left:13vw;}
.top_introduction .box .item .copy{font-size:1.0vw; margin-bottom:20px}
.top_introduction .box .item h3{font-size:2.8vw; margin-bottom:20px}
.top_introduction .box .item .text{text-align:center;}
.top_introduction .box .item .btn_more {margin-top: 40px;}
.top_introduction .box .item .text{font-size:0.7vw;}
.top_introduction .foot{font-size:6.5vw;font-family: 'Noto Sans JP', sans-serif; font-weight:500; margin-top:60px;}

@media screen and (max-width: 768px) {
.top_introduction{ padding:20px 0;}
.top_introduction h2{margin-bottom:40px;}
.top_introduction .circle_box{padding-left:5%; padding-right:5%; }
.top_introduction .circle_box:before{width: 60%;}
.top_introduction .circle_box:after{ display:none;}
.top_introduction .box{flex-direction: column;}
.top_introduction .box .item{min-width:100%;}
.top_introduction .box .item h3{font-size:24px; margin-bottom:20px; letter-spacing:1px;}
.top_introduction .box .item .copy{font-size:14px;}
.top_introduction .box .item .text{font-size:11px;}
.top_introduction .box .item.item_work{margin-bottom:20px;}
.top_introduction .box .item.item_photo{margin-bottom:20px;}
.top_introduction .box .item.item_photo img{margin-top:0;width: 100%;height: 100%; min-width:auto; min-height:auto;}
.top_introduction .box .item.item_environment{margin-top:0; margin-right:0;margin-bottom:20px;}
.top_introduction .box .item.item_career{margin-top:0;margin-bottom:20px;}
.top_introduction .box .item.item_about{margin-top:0; margin-left:0;}
.top_introduction .foot{font-size:7vw;}
}


/*==========================
トップ：人を知る
=========================*/
.top_people{border-bottom:solid 2px #bfab9d; padding-bottom:80px;}
.top_people .copy{margin-bottom:40px; font-size:18px; font-weight:500;}
.top_people .text{margin-bottom:40px;}
.swiper-container{position:relative; padding:0 40px}
.swiper-wrapper{height:auto;}
.swiper-wrapper .swiper-slide{font-family: "Zen Old Mincho", serif; text-align:left; }
.swiper-wrapper .swiper-slide .photo{overflow:hidden;}
.swiper-wrapper .swiper-slide .photo img{aspect-ratio: 1;    object-fit: cover;}
.swiper-wrapper .swiper-slide .name{font-family: "Oswald", sans-serif; font-size:14px; margin-top:20px;}
.swiper-wrapper .swiper-slide .name span{font-family: "Zen Old Mincho", serif; font-size:13px;}
.swiper-button-prev,.swiper-button-next{top:40% !important;}
.swiper-button-prev {  left: -20px !important; --swiper-navigation-color: #6b6461; z-index:1; }
.swiper-button-next {  right: -20px !important;--swiper-navigation-color: #6b6461;z-index:1; }
.top_people .btn_more{background:#000;}

.top_people .president{padding-top:80px; border-top:solid 1px #764b2c; margin-top:100px;}
.top_people .president .box{display:flex;justify-content: space-between;align-items: center;}
.top_people .president .box .text_area{width:63%;text-align:left;}
.top_people .president .box .text_area h3{font-family: "Yellowtail", cursive;  font-weight: 400; font-size:40px; margin-bottom:60px; }
.top_people .president .box .text_area .text{margin-bottom:40px; }
.top_people .president .box .text_area .name{ font-size:15px;display:flex;align-items: center;font-family: "Zen Old Mincho", serif;}
.top_people .president .box .text_area .name span{font-size:150%; margin-left:20px; margin-right:20px;}
.top_people .president .box .text_area .name img{margin-right:40px; width:80px;}
.top_people .president .box .photo{width:35%;}


@media screen and (max-width: 768px) {
.top_people .text{text-align:left;}
.top_people .president .box{flex-direction: column-reverse;}
.top_people .president .box .text_area{width:100%; margin-top:40px;}
.top_people .president .box .text_area h3{font-size:20px; margin-bottom:40px; }
.top_people .president .box .photo{width:100%;}
.top_people .president .box .text_area .name{flex-direction: column;}
.top_people .president .box .text_area .name img{margin-right:0; margin-bottom:20px;}

}

/*==========================
トップ：選考の流れ
=========================*/
.top_process{border-bottom:solid 2px #bfab9d; padding:80px 0;}
.top_process .copy{margin-bottom:40px; font-size:18px; font-weight:500;}
.top_process .text{margin-bottom:40px;}
.top_process .btn_more{background:#000;}

@media screen and (max-width: 768px) {
.top_process .text{text-align:left;}
}

/*==========================
トップ：フット
=========================*/
.top_foot{padding:80px 0;}
.top_foot .box{display:flex;justify-content: space-between;}
.top_foot .box .item{width:31%;border-radius:50%;aspect-ratio: 1 / 1;justify-content: center;align-items: center;display:flex;flex-direction: column; color:#FFF;}
.top_foot .box .item:nth-child(1){ background:#764B2C;}
.top_foot .box .item:nth-child(2){ background:#34B596;}
.top_foot .box .item:nth-child(3){ background:#764B2C;}
.top_foot .box .item h3{font-size:2.5vw; line-height:1.5;}

@media screen and (max-width: 768px) {
.top_foot{padding:40px 0;}
.top_foot .box{flex-wrap: wrap;justify-content: center;}
.top_foot .box .item{width:46%; margin-left:2%; margin-right:2%;}
.top_foot .box .item h3{font-size:20px;}
.top_foot .box .item .btn_more{margin-top:10px;}
.top_foot .box .item .btn_more a{padding:5px 10px;}
}


/*==========================
ニュース（リスト）
=========================*/
.news_list{padding:80px 0;}
.news_list .logo{width:180px; margin-left:auto; margin-right:auto; margin-bottom:80px;}
.news_list h2{font-size:28px; text-align:left; line-height:1; margin-bottom:20px; display:flex;align-items: center;}
.news_list h2 span{display:inline-block; font-size:60px;font-family: 'Noto Sans JP', sans-serif; margin-right:40px;}
.news_list h2 .btn_more{margin-left:auto; margin-top:0;    margin-right: 0; font-size:14px;}
.news_list .item{display:flex;justify-content: space-between; align-items: center; border-top:solid 1px #764b2c; padding:20px 0;}
.news_list .item:last-child{border-bottom:solid 1px #764b2c;}
.news_list .item .text_area{display:flex;flex-wrap: wrap;    align-items: center; letter-spacing:1px; text-align:left;width: calc(100% - 200px);}
.news_list .item .text_area .date{width:120px;}
.news_list .item .text_area .category{width:150px; background:#34b596; color:#FFF; border-radius:5px; padding:3px 20px; margin-right:20px;}
.news_list .item .text_area .type{min-width:300px;background:#764b2c; color:#FFF; border-radius:5px; padding:3px 20px;}
.news_list .item .text_area h3{width:100%;letter-spacing:1px;font-family: 'Noto Sans JP', sans-serif; margin-top:20px;}
.news_list .item .btn_more{width:130px;    margin-top: 0px;margin-right: unset;}


@media screen and (max-width: 768px) {
.news_list{padding:40px 0;}
.news_list h2{display:block;}
.news_list h2 span{display:block;}
.news_list .item{flex-direction: column;}
.news_list .logo{margin-bottom:30px;}
.news_list .item .text_area{width:100%;flex-direction: column;align-items: flex-start;}
.news_list .item .text_area .date{margin-bottom:10px;}
.news_list .item .text_area .category{width:fit-content; margin-bottom:10px;}
.news_list .item .text_area .type{width:fit-content; min-width:auto; margin-bottom:10px;}
.news_list .item .text_area h3{line-height:1.5; margin-top:0;}
.news_list .item .btn_more{margin-top:20px;}
}

/*==========================
店舗情報
=========================*/
.access{}
.access .head{ margin-bottom:80px;}
.access .head h1{font-size:120px; padding-top:150px; padding-bottom:60px;font-family: 'Noto Sans JP', sans-serif;}
.access .head .copy{font-size:40px; margin-bottom:40px;}
.access iframe{border-radius:25px; margin-bottom:100px;}
.access .shop_info .box{display:flex;justify-content: space-between; margin-bottom:100px;}
.access .shop_info .box:nth-child(){margin-bottom:20px;}
.access .shop_info .box:nth-child(5) .text_area .info img{position:absolute; right:5%; top:0px;width: 40%;}
.access .shop_info .box:nth-child(6){align-items: flex-end;}
.access .shop_info .box .photo{width:40%;}
.access .shop_info .box .photo img{height:500px; object-fit:cover;}
.access .shop_info .box .text_area{width:55%; text-align:left; padding-right:5%;}
.access .shop_info .box .text_area h2{display:flex;align-items: center;font-family: "Zen Old Mincho", serif; font-weight:normal; font-size:40px; line-height:1.1; margin-bottom:40px;}
.access .shop_info .box .text_area h2 span{font-size:40%; margin-left:20px; line-height:1.5;}
.access .shop_info .box .text_area .copy{font-size:22px; margin-bottom:20px;}
.access .shop_info .box .text_area .text{margin-bottom:40px;}
.access .shop_info .box .text_area .info{font-family: 'Noto Sans JP', sans-serif; font-weight:300; font-size:90%; position:relative;}

.access .service .head{position:relative; margin-bottom:60px;}
.access .service .head img{width:50%; min-width:400px;}
.access .service .head h2{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); color:#FFF;}
.access .service .copy{margin-bottom:40px;font-size:30px;}
.access .service .text{margin-bottom:40px;}
.access .service .notice{margin-bottom:60px;font-family: 'Noto Sans JP', sans-serif; font-weight:300;}
.access .service h3{margin-bottom:20px; font-size:16px;font-family: 'Noto Sans JP', sans-serif;}

@media screen and (max-width: 768px) {
.access iframe{margin-bottom:60px;}
.access .head h1{font-size:40px; padding-top:140px; padding-bottom:60px;}
.access .head .copy{font-size:30px;}
.access .shop_info{width:94%;padding: 0 3%;margin-left:auto; margin-right:auto; }
.access .shop_info .box{flex-direction: column-reverse;}
.access .shop_info .box .photo{width:100%; margin-top:20px;}
.access .shop_info .box .text_area{width:100%;  padding-right:0%;}
.access .shop_info .box .text_area h2{flex-direction: column;}
.access .shop_info .box .text_area h2 span{margin-top:5px;}

.access .service .head{margin-bottom:40px;}
.access .service .head img{width:300px;    min-width: 300px;}
.access .service .text{text-align:left;}
.access .service .copy{font-size:22px;}
.access .shop_info .box .text_area h2{font-size:40px;}
.access .shop_info .box .photo img{height:300px;}
}



/*==============================
下層：ヘッダー
==============================*/
.head{ position:relative; padding-top:60px; overflow:hidden; }
.head .box{ display:flex;justify-content: flex-end; margin-bottom:80px;}
.head .box .item{position:relative;}
.head .box .item .circle{border-radius:50%;height:450px; aspect-ratio: 1 / 1;justify-content: center;align-items: center;display:flex;flex-direction: column; color:#FFF; position:absolute; left:-240px; bottom:0;}
.head .box .item .circle h1{font-size:70px; position:relative;margin-top: -30px;}
.head .box .item .circle h1:before,.head .box .item .circle h1:after{content:"";background:#FFF; height:1px; width:100%; position:absolute; left:0; }
.head .box .item .circle h1:before{top:75px;}
.head .box .item .circle h1:after{bottom:-40px;}
.head .box .item .circle h1 span{margin-bottom:80px; font-size:24px}
.head .box .item .photo img{border-radius:50%; overflow:hidden; height:700px; width:auto; aspect-ratio:1;object-fit: cover;margin-right: -40px;}
.head .logo{position:absolute; top:120px; left:10%; width:240px;}
.head .text{font-family: "Zen Old Mincho", serif; font-size:20px; }
.head.head_people h1{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color:#FFF; width:100%; font-size:8vw;font-family: 'Noto Sans JP', sans-serif; }

@media screen and (max-width: 768px) {
.head .text{width:94%;padding: 0 3%;margin:0 auto;}
.head .logo{top:80px; width:80px; left:20px;}
.head .box{}
.head .box .item .photo img{ width:300px; height:auto;}
.head .box .item .circle{ height:200px; left:-120px;}
.head .box .item .circle h1{font-size:30px; margin-top:0;}
.head .box .item .circle h1 span{margin-bottom:20px; font-size:18px;}
.head .box .item .circle h1:before{top:30px;}
.head .box .item .circle h1:after{bottom: -10px;}

}


/*==============================
下層：ヘッダー２
==============================*/
.head2{padding-top: 60px; margin-bottom:80px; }
.head2 .box{display:flex;justify-content: space-between; width:90%; margin-left:auto;}
.head2 .box .logo{width:240px;}
.head2 .box .text_area{width:55%; text-align:left;}
.head2 .box .text_area h1{background:#764b2c; color:#FFF; font-size: 1.8vw; padding:20px 60px; position:relative; letter-spacing:5px;}
.head2 .box .text_area h1:before{ content:"";background:#34b596; width:3px; height:100%; position:absolute; left:20px;top: 0;}
.head2 .box .text_area span{ font-size:5.1vw; line-height:1.5;}

@media screen and (max-width: 768px) {
.head2{padding-top:80px; margin-bottom:40px;}
.head2 .box{width:90%; margin-left:auto; margin-right:auto;}
.head2 .box .logo{ display:none;}
.head2 .box .text_area{width:100%;}
.head2 .box .text_area h1{font-size:24px;}
}


/*==============================
仕事を知る
==============================*/
.work .role{border-bottom:solid 2px #bfab9d;padding:80px 0;}
.work .role h2 span{font-size:5.5vw; margin-bottom:40px;font-family: 'Noto Sans JP', sans-serif;}
.work .role .text{margin-bottom:40px;}
.work .role .box{display:flex;justify-content: space-between;flex-wrap: wrap;}
.work .role .box .item{width:45%; text-align:left;margin-bottom:60px;}
.work .role .box .item:nth-child(3){margin-bottom:0;}
.work .role .box .item:nth-child(4){margin-bottom:0;}
.work .role .box .item .photo{margin-bottom:20px;}
.work .role .box .item .photo img{border-radius:50%;aspect-ratio: 1; object-fit:cover; }
.work .role .box .item h3{font-size:40px;margin-bottom:20px; line-height:1.3;}
.work .role .box .item h3 span{display:inline; font-size:70%;font-family: "Zen Old Mincho", serif;}

.work .schedule{border-bottom:solid 2px #bfab9d;padding:80px 0;}
.work .schedule .text{margin-bottom:60px;}
.work .schedule .box{display:flex;justify-content: space-between;}
.work .schedule .box .item{width:45%; }

.work .workstyle{padding:80px 0;}
.work .workstyle .text{margin-bottom:60px;}
.work .workstyle .box{ background:url(/wp-content/themes/masale_recruit/assets/image/bg_wallpaper.jpg) no-repeat;    background-size: cover; border-radius:25px; padding:60px;}
.work .workstyle .box h3{font-family: 'Noto Sans JP', sans-serif; position:relative;    width: fit-content;    margin-left: auto;    margin-right: auto; margin-bottom:40px; font-size:30px; padding:0 20px;}
.work .workstyle .box h3:after{ content:""; background:rgba(117 , 76 , 36 , 1.0); mix-blend-mode: color-burn; height:20px; width:100%; position:absolute; bottom:-10px;left: 50%; transform: translateX(-50%); opacity:60%; } 
.work .workstyle .box .text{ margin-bottom:40px;}
.work .workstyle .box .text:last-child{margin-bottom:0;}

.work .message{}
.work .message .box{background:url(/wp-content/themes/masale_recruit/assets/image/people_message.jpg) no-repeat;    background-size: cover; padding:80px 60px; color:#FFF; margin-top:80px;}
.work .message .box h3{font-family: "Yellowtail", cursive;  font-weight: 400; font-size:40px; margin-bottom:40px;}
.work .message .box .text{line-height:2; margin-bottom:40px;font-family: 'Noto Sans JP', sans-serif; font-size:16px;}
.work .message .box .name{font-family: "Zen Old Mincho", serif; margin-top:40px;}
.work .message .box .name span{margin-left:20px; font-size:120%;}




@media screen and (max-width: 768px) {
.work .role .text{width:94%;padding: 0 3%;margin-left:auto; margin-right:auto; text-align:left;}
.work .role .box{flex-direction: column;}
.work .role .box .item{width:100%; margin-bottom:40px;}
.work .role .box .item:nth-child(3){margin-bottom:40px;}
.work .role .box .item h3{font-size:30px;}
.work .role .box .item h3 span{font-size:60%;}
.work .schedule{padding:40px 0;}
.work .schedule .text{ text-align:left;}
.work .schedule .box{flex-direction: column;}
.work .schedule .box .item{width:100%; margin-bottom:20px; }
.work .workstyle{padding:40px 0;}
.work .workstyle .text{width:94%;padding: 0 3%;margin-left:auto; margin-right:auto; text-align:left;}
.work .workstyle .box{padding:20px;}
.work .workstyle .box .text{text-align:left;}

.work .message .box{padding:40px 20px;}
.work .message .box .text{width:100%; padding:0;  font-size:15px;}
.work .message .box .name span{display:block; margin-left:0;}

}



/*==============================
人を知る
==============================*/
.people{padding-top:80px;}
.people .copy{font-family: "Zen Old Mincho", serif; font-size:24px;margin-bottom:60px;}
.people .text{ font-size:15px;margin-bottom:80px;}


.people .voice{border-bottom:solid 2px #bfab9d;padding:80px 0;}
.people .voice .box{display:flex;justify-content: space-between;margin-bottom:80px;}
.people .voice .box .item{width:32%; padding:30px; border-left:solid 1px #231815; text-align:left;}
.people .voice .box .item:last-child{border-right:solid 1px #231815;}
.people .voice .foot{font-size:24px;font-family: "Zen Old Mincho", serif; }

.people .interview{border-bottom:solid 2px #bfab9d;padding:80px 0;}
.people .interview h3{font-family: "Oswald", sans-serif; font-size:17px;margin-bottom:60px;letter-spacing:1px;}

@media screen and (max-width: 768px) {
.people .text{text-align:left;}
.people .copy{width:94%;padding: 0 3%;margin-left:auto; margin-right:auto; font-size:20px; margin-bottom:40px;}
.people .voice .box{flex-direction: column;}
.people .voice .box .item{width:100%; padding:30px; border-bottom:solid 1px #231815;border-left:none; }
.people .voice .box .item:last-child{border-right:none; border-bottom:none;}
.people .voice .foot{font-size:18px;}
.people .interview .copy{font-size:18px;}
.people .interview h3{margin-bottom:20px;}
}


/*==============================
成長とキャリア
==============================*/
.career .developing{padding:80px 0;}
.career .developing h2 span{font-size:6vw; margin-bottom:40px;font-family: 'Noto Sans JP', sans-serif;}
.career .developing .copy{margin-bottom:80px;}
.career .developing .box{display:flex; background:url(/wp-content/themes/masale_recruit/assets/image/bg_wallpaper.jpg) no-repeat;    background-size: cover; width:80%; margin-left:auto; margin-bottom:40px; }
.career .developing .box .text_area{width:65%; padding:40px 60px; text-align:left;}
.career .developing .box .text_area h3{font-size:2.6vw; margin-bottom:40px; line-height:1.6; letter-spacing:2px;}
.career .developing .box .text_area .copy{ font-size:1.5vw;margin-bottom:40px;}
.career .developing .box .text_area .text{font-size: clamp(13px, 1.0vw, 18px);}
.career .developing .box .title_area{width:35%; text-align:left; position:relative;}
.career .developing .box .title_area img{height:500px;max-width: 100%; object-fit:cover;object-position: right;}
.career .developing .box .title_area span{ position: absolute;    z-index: 1;font-family: "Oswald", sans-serif; left:20px; bottom:40px; font-size:26px; color:#FFF; line-height:1.4; }

.career .developing .box.box2{flex-direction: row-reverse;margin-bottom:80px;margin-left:unset;margin-right:auto;}
.career .developing .box.box2 .text_area{text-align:right;width:70%;}
.career .developing .box.box2 .title_area{justify-content: flex-end; text-align:right;width:30%;}
.career .developing .box.box2 .title_area img{height:600px;}
.career .developing .box.box2 .title_area span{left:unset;   right: 20px;   }

.benefits{}
.benefits .item{border-top:solid 2px #bfab9d;padding:60px 0; text-align:left; position:relative;}
.benefits .item h3{font-size:3vw; margin-bottom:40px;}
.benefits .item .copy{margin-bottom:40px; font-size:24px;}
.benefits .item .text{margin-bottom:40px;    position: relative;}
.benefits .item img.image{position:absolute; right:20px; top:80px; width:35%; }
.benefits .item ul{	background-color: rgba(221 , 219 , 198 , 0.3);	border-radius: 25px;	padding: 40px;	color: #553419;	font-weight: 500;	background-repeat: no-repeat;	background-position: right 40px bottom 40px;	background-size: auto 100px;}
.benefits .item ul.career_path{ background-image:url(/wp-content/themes/masale_recruit/assets/image/ic_career_path.svg) ;}
.benefits .item ul.training{ background-image:url(/wp-content/themes/masale_recruit/assets/image/ic_training.svg) ;}
.benefits .item ul.assistance{ background-image:url(/wp-content/themes/masale_recruit/assets/image/ic_assistance.svg) ;}
.benefits .item ul.mentoring{ background-image:url(/wp-content/themes/masale_recruit/assets/image/ic_mentoring.svg) ;}
.benefits .item ul.consultation{ background-image:url(/wp-content/themes/masale_recruit/assets/image/ic_consultation.svg) ;}
.benefits .item ul.benefits{ background-image:url(/wp-content/themes/masale_recruit/assets/image/ic_benefits.svg) ;}
.benefits .item ul.wlb{ background-image:url(/wp-content/themes/masale_recruit/assets/image/ic_wlb.svg) ;}
.benefits .item ul.office{ background-image:url(/wp-content/themes/masale_recruit/assets/image/ic_office.svg) ;}
.benefits .item ul.relationship{ background-image:url(/wp-content/themes/masale_recruit/assets/image/ic_relationship.svg) ;}
.benefits .item ul li{text-indent: -20px;padding: 0 0 0 20px;}
.benefits .item ul li:before{content:"●"; margin-right:5px;}

@media screen and (max-width: 768px) {
.career .developing{padding:40px 0;}
.career .developing h2 span{font-size:7vw;}
.career .developing .copy{width:94%;padding: 0 3%;margin-left:auto; margin-right:auto;}
.career .developing .box{flex-direction: column;width:100%;}
.career .developing .box .text_area{width:100%; padding:20px; }
.career .developing .box .text_area h3{font-size: 20px; margin-bottom:20px;}
.career .developing .box .text_area .copy{font-size:16px; width:100%; padding:0;}
.career .developing .box .title_area{width:100%;padding:20px;}
.career .developing .box .title_area img{height:300px;}
.career .developing .box .title_area span{left: 50%; transform: translateX(-50%); width:100%; text-align:center;}
.career .developing .box.box2{flex-direction: column; margin-bottom:0;}
.career .developing .box.box2 .text_area{text-align:left; width:100%;}
.career .developing .box.box2 .title_area{ width:100%;}
.career .developing .box.box2 .title_area img{height:300px;}
.career .developing .box.box2 .title_area span{left: 50%;transform: translateX(-50%); width:100%; }


.benefits .item:last-child{padding-bottom:0;}
.benefits .item h3{font-size:26px; line-height:1.4;}
.benefits .item .copy{font-size:18px; width:100%; padding:0;}
.benefits .item ul{padding:20px 20px 100px 20px;}
.benefits .item ul{background-position:right 20px bottom 20px;background-size: auto 60px;}
.benefits .item img.image{display:none;}
}



/*==============================
働く環境
==============================*/
.environment{padding:80px 0;}
.environment h2 span{font-size:6vw; margin-bottom:40px;font-family: 'Noto Sans JP', sans-serif;}
.environment .copy{margin-bottom:80px; font-size:24px;}
.environment h3{font-size:3vw; margin-bottom:40px;}

.environment .atmosphere{border-bottom:solid 2px #bfab9d;padding:80px 0; text-align:left;}
.environment .atmosphere .copy{margin-bottom:40px;}
.environment .atmosphere .text{margin-bottom:0;}

.environment .workplace{border-bottom:solid 2px #bfab9d;padding:80px 0;text-align:left;}
.environment .workplace .text{margin-bottom:0;}
.environment .workplace .copy{margin-bottom:40px;}


@media screen and (max-width: 768px) {
.environment{padding:40px 0;}
.environment h2 span{font-size:7vw;}
.environment h3{font-size: 26px;line-height: 1.4;}
.environment .copy{width:94%;padding: 0 3%;margin-left:auto; margin-right:auto; font-size:20px; text-align:left;}
.environment .workplace .copy{width:100%; padding:0;}
.environment .atmosphere .copy{width:100%; padding:0;}
}
/*==============================
企業情報
==============================*/
.company{padding:80px 0;}
.company h2 span{font-size:6vw; margin-bottom:40px;font-family: 'Noto Sans JP', sans-serif;}
.company .copy{margin-bottom:80px;font-family: "Zen Old Mincho", serif; font-size:18px;}
.company .box{border-top:solid 2px #bfab9d;padding:60px 0;}
.company .box h3{font-size: 3.1vw;margin-bottom: 40px;letter-spacing: 5px;line-height: 1.4;}
.company .box .text{font-family: "Zen Old Mincho", serif; font-size:20px;}
.company .history{background:url(/wp-content/themes/masale_recruit/assets/image/bg_wallpaper.jpg) no-repeat;    background-size: cover; border-radius:25px; padding:100px; position:relative;container-type: inline-size; margin-top:80px;}
.company .history dl{display:flex;align-items: flex-end; border-bottom:solid 1px #000000; padding:10px 0;width: fit-content; }
.company .history dl:last-child{align-items: center;}
.company .history dt{font-family: "EB Garamond", serif; font-size:4vw; line-height:1;font-weight: 500; width:20cqw;text-align:left;}
.company .history dd{padding-bottom:0.2vw; font-size:18px; text-align:left;font-weight: 500;}
.company .history img{position:absolute; top:60px; right:40px; width:25%;text-align:left;}

.company table{text-align:center; width:80%; margin-left:auto; margin-right:auto;margin-top:80px;font-weight: 500;}

.company .shop_list{margin-top:80px;}
.company .shop_list .item{display:flex;justify-content: space-between;margin-bottom:40px;}
.company .shop_list .item .photo{width:30%;}
.company .shop_list .item .text_area{width:65%; text-align:left;container-type: inline-size;}
.company .shop_list .item .text_area h4{font-family: "Zen Old Mincho", serif; font-size:3.3cqw; margin-bottom:20px;}
.company .shop_list .item .text_area .text{font-size:2.1cqw;font-family: 'Noto Sans JP', sans-serif;}

@media screen and (max-width: 768px) {
.company{padding:40px 0;}
.company h2 span{font-size:7vw;}
.company .copy{width:94%;padding: 0 3%;margin-left:auto; margin-right:auto;text-align:left;}
.company .box h3{font-size:30px;}
.company .box .text{font-size:18px;text-align:left;}
.company .history{padding:20px;}
.company .history dl{align-items: center;}
.company .history dt{font-size:30px;width: 30%;}
.company .history dd{font-size:16px;width: 65%;}
.company .history img{display:none;}
.company .shop_list .item{flex-direction: column;}
.company .shop_list .item:last-child{margin-bottom:0;}
.company .shop_list .item .photo{width:100%;}
.company .shop_list .item .text_area{width:100%; margin-top:20px;}
.company .shop_list .item .text_area h4{font-size:20px; line-height:1.6;}
.company .shop_list .item .text_area .text{font-size:15px;}
}
/*==============================
選考の流れ
==============================*/
.process{background:#DDDCCF; padding:200px 0 100px 0;}
.process h1{font-size:3.5vw;margin-bottom:80px; letter-spacing:5px; }
.process .copy{font-family: "Zen Old Mincho", serif;    font-size: 20px; }
.process .flow{ margin-top:100px; margin-bottom:200px; margin-left:auto; margin-right:auto; width:80%;}
.process .flow .item{display:flex;justify-content: space-between;align-items: flex-start;margin-bottom:80px;}
.process .flow .item .step{width:200px;display:flex; justify-content: center;align-items: center; color:#FFF; position:relative;}
.process .flow .item .step .number{font-family: "Zen Old Mincho", serif; font-size:80px; line-height:1;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }
.process .flow .item .step .number span{display:block;font-family: "Oswald", sans-serif;font-size: 17px;}


.process .flow .item .text_area{ text-align:left; width:calc(100% - 260px);}
.process .flow .item .text_area .copy{border-bottom:solid 1px #000; padding-bottom:10px; margin-bottom:10px;}
.process .flow .item .text_area h2{font-family: 'Noto Sans JP', sans-serif; font-size:30px; margin-bottom:10px; font-weight:500;}
.process .flow .item .text_area h2 span{display:inline;}

.process .message h2 span{font-size:30px;font-weight: 500;}
.process .message .text{font-family: "Zen Old Mincho", serif; font-size:24px;}


@media screen and (max-width: 768px) {
.process{padding:100px 0;}
.process h1{font-size: 26px;}
.process .copy{width:94%;padding: 0 3%;margin-left:auto; margin-right:auto;}
.process .flow{width:100%;}
.process .flow .item{flex-direction: column;align-items: center;}
.process .flow .item .text_area{width:100%;}
.process .flow .item .text_area h2{text-align:center; margin-bottom:20px;}
.process .flow .item .text_area .copy{width:100%; padding:10px 0;}
.process .flow .item .step{width:150px; margin-bottom:20px;}
.process .flow .item .step .number{font-size:60px;}
.process .message .text{font-size:20px;}

}


/*==============================
インタビュー
==============================*/
.interview{}
.interview .head{position:relative; text-align:center; padding-left:20px; padding-right:20px;}
.interview .head img{height:calc(100vh - 60px); object-fit:cover;}
.interview .head .text_area{position:absolute; width:30vw; min-width:300px; height:18vw;min-height:280px; top:20vh; left:10vw;background-color: rgba(255 , 255 , 255 , 0.7);	border-radius: 50px;display:flex;justify-content: center;align-items: center;flex-direction: column;}
.interview .head .text_area.right_bottom{ left:unset; top:unset; right:8vw; bottom:10vh}
.interview .head .text_area.right{ left:unset;right:8vw;}
.interview .head .text_area h1{font-size:3.0vw; letter-spacing:1px;}
.interview .head .text_area h1 span{font-size:1.6vw;letter-spacing:3px; margin-top:20px;}
.interview .head .name{font-size:20px;}
.interview .head .name span{display:block;}



.interview .box{display:flex; padding-top:100px; margin-bottom:150px;}
.interview .box .photo{width:25%; margin-right:80px; margin-top:-40px;display:flex;flex-direction: column;justify-content: space-between;}
.interview .box .photo .logo{width:40%; margin-left:auto; margin-right:auto; }
.interview .box .text_area{width:60%; text-align:left;}
.interview .box .text_area .question{ color:#764B2C; margin-bottom:40px; font-weight:500;}
.interview .box .text_area .answer{ margin-bottom:40px; border-bottom:solid 1px #764B2C;padding-bottom:40px;}
.interview .box .text_area .answer:last-child{border-bottom:none;padding-bottom:0px; margin-bottom:0px; }

.interview .btn_more a{padding-left:100px; padding-right:100px;}

@media screen and (max-width: 768px) {
.interview .head{margin-bottom:40px;}
.interview .head .name{font-size:17px;}
.interview .head .text_area h1{font-size:4vw;}
.interview .head img{height:300px;}
.interview .head .text_area{height:200px; top:70px; min-width:auto;min-height:auto; width:40%;}
.interview .box{flex-wrap: wrap;flex-direction: column-reverse;width:94%;padding: 0 3%;margin-left:auto; margin-right:auto; margin-bottom:80px;}
.interview .box .photo .logo{display:none;}
.interview .box .text_area{width:100%;}
.interview .box .photo{width:70%; margin-left:auto; margin-right:auto; margin-top:40px;}
}

/*==============================
募集職種一覧・よくあるご質問・エントリー
==============================*/
.general{text-align:left; margin-bottom:100px;}
.general h2{font-size:40px;font-family: 'Noto Sans JP', sans-serif; font-weight:500; margin-bottom:20px; padding-left:20px;}

.general .item .head{display:flex; align-items: center;padding-top:0; margin-bottom:20px;}
.general .item .head .date{width:120px;}
.general .item .head .category{width:auto; background:#34b596; color:#FFF; border-radius:5px; padding:3px 20px; margin-right:20px;}
.general .item .head .type{width:auto;background:#764b2c; color:#FFF; border-radius:5px; padding:3px 20px;}
.general .item h4{margin-bottom:40px;}
.general .item .introduction{margin-bottom:20px;}
.general .item{border-top:solid 2px #764b2c; }
.general .item:last-child{border-bottom:solid 2px #764b2c; }
.general .item h3{padding:20px;}
.general .item h3:hover{cursor:pointer;}
.general .item h3 span{margin-bottom:0;font-family: "Zen Old Mincho", serif; font-size:24px;}
.general .item h3 span a:hover{text-decoration:underline;}
.general .item .accordion-content{padding:20px;}
.general .item .accordion-container{ border-radius:50px; background:#FFF; padding:0px 40px 40px 40px; }
.general .item .js-accordion-title{position: relative;}
.general .item .js-accordion-title:before { content: ''; position: absolute;  right: 20px;  top: 30px;  width: 0;  height: 0;  border-style: solid;  border-right: 20px solid transparent;  border-left: 20px solid transparent;  border-top: 20px solid #f7931e;
  border-bottom: 0; transform: rotate(0deg);  transition: all .3s ease-in-out;z-index: 1;}
.general .item .js-accordion-title:after { content: 'VIEW MORE';position: absolute;  right: 14px;  top: 15px; color:#f7931e; font-size:10px;font-family: "Oswald", sans-serif; letter-spacing:1px;}
  
  
  
.general .item .js-accordion-title.open:before { transform: rotate(180deg);top: 18px;}
.general .item .js-accordion-title.open:after{content: 'CLOSE';right: 24px;  top: 45px;}
.general table td,.general table th{border-top:solid 1px #764b2c;vertical-align: top;}
.general table th{width:15%; background:none; text-align:left;}

.general .btn_more{border-radius:5px;    font-size: 16px; margin-bottom:40px;}

@media screen and (max-width: 768px) {
.general h2{font-size:30px; padding-left:0; margin-bottom:10px;}
.general .item .head{flex-direction: column;align-items: flex-start;}
.general .item .head .date{margin-bottom:10px;}
.general .item .head .category{width:fit-content; margin-bottom:10px; margin-right:0;}
.general .item .head .type{width:fit-content; min-width:auto; margin-bottom:10px;}
.general .item .head h3{line-height:1.5; margin-top:0;}
.general .item .head .btn_more{margin-top:20px;}


.general .item h3{padding-left:0; padding-right:30px;}
.general .item h3 span{font-size:18px;}

.general .item h4{line-height:1.6;}
.general .item .js-accordion-title:before{right:0;border-right: 10px solid transparent;  border-left: 10px solid transparent;  border-top: 10px solid #f7931e;top: 26px;}
.general .item .js-accordion-title:after { content:none; }
.general .item .js-accordion-title.open:after{ content:none; }
.general .item .js-accordion-title.open:before { top: 26px;}
.general .item .accordion-content{padding:0px 0 20px 0;}

.general table tr th,.general table tr td{padding:0; display:block; width:100%;}
.general table tr:first-child th{border-top:solid 1px #764b2c;}
.general table tr th{padding-top:10px;}
.general table tr td{border-top:none; padding-bottom:10px;}

}

/*==============================
注目の求人情報
==============================*/
.spotlight_detail{ text-align:left;}
.spotlight_detail h2{font-size:40px;font-family: 'Noto Sans JP', sans-serif; font-weight:500; margin-bottom:20px; padding-left:20px; border-bottom:solid 2px #764b2c; padding-bottom:20px;}
.spotlight_detail .item{padding:20px; border-bottom:solid 2px #764b2c; padding-bottom:40px;}
.spotlight_detail .item .head{display:flex;align-items: center; padding-top:0; margin-bottom:20px;}
.spotlight_detail .item .head .date{width:120px;}
.spotlight_detail .item .head .place{width:auto; background:#34b596; color:#FFF; border-radius:5px; padding:3px 20px; margin-right:20px;}
.spotlight_detail .item .head .type{width:auto;background:#764b2c; color:#FFF; border-radius:5px; padding:3px 20px;}

.spotlight_detail .item h3{margin-bottom:20px;}
.spotlight_detail .item h3 span{margin-bottom:0;font-family: "Zen Old Mincho", serif; font-size:24px;}
.spotlight_detail .btn_more{font-size:15px;}

@media screen and (max-width: 768px) {
.spotlight_detail h2{margin-bottom:40px;font-size:20px;padding-left:0;}
.spotlight_detail .item {padding:0;}
.spotlight_detail .item .head{flex-direction: column;align-items: flex-start;}
.spotlight_detail .item .head .date{margin-bottom:10px;}
.spotlight_detail .item .head .place{width:fit-content; margin-bottom:10px; margin-right:0;}
.spotlight_detail .item .head .type{width:fit-content; min-width:auto; margin-bottom:10px;}
.spotlight_detail .item .head h3{line-height:1.5; margin-top:0;}
.spotlight_detail .item .head .btn_more{margin-top:20px;}
.spotlight_detail .btn_more{margin-bottom:40px;}
}


/*==============================
もっと見る
==============================*/
.more{transition:0.2s all; padding:5px 25px;}
.more:hover{transform: scale(1.15);transition:0.2s all; letter-spacing:2px;}




/*=======  ページャー  =======*/
.pagenation{display:flex;justify-content: center;margin-bottom:100px; margin-top:100px;}
.pagenation .item{width:200px; margin:20px 0px; text-align:center; border-bottom:none;}
.pagenation .item a{color:#000;}
.pagenation .item:last-child{text-align:right;}
.pagenation .item > div{display:flex; font-size:13px; margin-bottom:20px;}
.pagenation .item:last-child > div{flex-direction: row-reverse;}
.pagenation .item .date{ margin-bottom:0px;}
.pagenation .item .title{border-bottom:none; padding-bottom:0px;}
.pagenation .item .title a{color:#000; font-size:17px;}

.arrow-left,.arrow-right {position: relative;display: inline-block;padding: 10px;}
.arrow-left::before, .arrow-right::before {  content: '';  width: 20px;  height: 20px;  border-top: solid 2px #000;  border-right: solid 2px #000;  position: absolute;  left: 0px;  top: 1px;}

.arrow-left::before{ transform: rotate(-135deg);}
.arrow-right::before {  transform: rotate(45deg);}

@media screen and (max-width: 768px) {
.page-detail .title{margin-bottom:40px;}
.pagenation{margin-bottom:40px;}
}

/*=======  ボタン（もっと見る）  ======*/
.btn_more{
	width:fit-content;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;transition-duration: .2s;
	font-size:12px;
	letter-spacing:1px;
	font-family: "Oswald", sans-serif;
	}
.btn_more a{display:block;color: #fff;transition-duration: .3s; text-align:center; padding:5px 20px; }
.btn_more:hover{transition-duration: .2s;transform: scale(1.10);}	


a .btn_more{ padding:5px 20px; }
.btn_more.green{background: #176e5a}
.btn_more.brown{background: #553419}
.btn_more.black{background: #231815}
.btn_more.orange{background: #f7931e}

/*=======  部品  ======*/
.text_brown{color:#894810;}
.text_arange{color:#F15A24;}
.noto_sans{font-family: 'Noto Sans JP', sans-serif; font-weight:500;}
.p-0{padding:0px !important;}
.mt25{margin-top:25px !important;}
.mb50{margin-bottom:50px !important;}
.pt45{padding-top:45px !important;}
.pb50{padding-bottom:50px !important;}
.text-left{text-align:left;}
.bg_green{ background:#34B596;}
.bg_brown{background:#764B2C}

.blue{color:#00a8ca; }	
.red{color:red; }	
.photo-center{text-align:center; margin:0 auto; margin-bottom:40px;}


table {width:100%;}
table th, table td{padding:10px;border-top:solid 1px #CCC; line-height:1.8;}
table tr:first-child th, table tr:first-child td{border-top:none;}
table th{background-color:#f8f8f8; width:25%; text-align:center;vertical-align: middle; font-weight:normal;}
.img100{width:100%; height:auto;}


@media screen and (max-width: 768px) {
table td:first-child{ font-weight:bold; }
table th, table td{width:100%; display:block; }
}


/*=======  フォーム  ======*/
.contact{}
.contact .must{width:50px;display:inline-block; margin-right:20px;}
.contact .must span.brown{border-radius:5px; color:#FFF; background:#764b2c; font-size:13px; display:block; padding:1px 10px; text-align:center;}
.contact th{width:25% !important;}
.contact input[type=text],.contact input[type=email],.contact textarea{border:solid 1px #CCC; border-radius:5px; padding:10px;}
.contact table td, .contact table th{vertical-align:middle;}
.contact textarea{width:100%;}

.contact input[type=submit],.contact button[type=submit]{background: #754c24; color:#FFF; width:300px; text-align:center; margin-left:auto; margin-right:auto; padding:10px;transition:0.2s all; border-radius:10px; }
.contact input[type=submit]:hover,,.contact button[type=submit]:hover{transform: scale(1.05);transition:0.2s all;}
.contact ul.btn{flex-direction: column; margin-top:40px; margin-bottom:40px;}
.contact ul.btn li.back{margin-bottom:20px;}
.contact ul.btn li.back button[type=submit] {width:200px;}

@media screen and (max-width: 768px) {
.contact input[type=text], .contact input[type=email], .contact textarea{width:100%;}
.contact th{width:100% !important; padding-bottom:0;}
.contact .must{width:auto; margin-right:0;}
.contact .must span{margin-right:10px;}
.ui-datepicker table th{width:auto; display: table-cell;}
.ui-datepicker td{width:auto; display:table-cell;}
.contact table th{padding-bottom:10px !important;}
}


/*==============================
ページトップ
==============================*/

#page_top {position: fixed;bottom: 30px;left: calc(100vw - 100px); display:none; z-index:1;}
#page_top a {background-color: #999;color: #fff;text-align: center;	text-decoration: none;font-size: 24px;padding-top: 6px;	padding-right: 15px;padding-bottom: 10px;padding-left: 15px;}
#page_top a:hover {background-color: #666;text-decoration: none;}

@media screen and (max-width: 768px) {
#page_top {bottom: calc(100vh - 95vh);left:auto; right:20px; }
#page_top a{}
}



/*=======  サイトマップ  =======*/


/*=======  フッター  ====*/
footer{padding-top:100px;  text-align:center;font-family: "Oswald", sans-serif;letter-spacing:1px; }
footer h3{font-size:3.5vw; margin-bottom:40px;}
footer .copy{ margin-bottom:150px; font-size:15px;}
footer .box{display:flex;justify-content: space-between;width:700px; margin:0 auto;}
footer .box .logo{width:17%;}
footer .box .navi{width:74%; text-align:left;}
footer .box .navi ul{display:flex;align-items: center; margin-bottom:10px; }
footer .box .navi ul li{margin-right:25px;}
footer .box .navi ul li.sns{margin-left:7px; margin-right:7px;}
footer .box .navi ul li i{font-size:30px;}
footer .box .navi ul li img{width:50px;}
footer .box .navi .address{letter-spacing:0px;}
footer .box .navi .address span{font-size:160%; }
footer .box .navi .address .copyright{ font-size:10px;letter-spacing:1px; }


@media screen and (max-width: 768px) {
footer{margin-bottom:0px; text-align:center;}
footer h3{font-size:30px; line-height:1.6;}
footer .copy{line-height:1.6; margin-bottom:50px;}
footer .box{width:100%;flex-direction: column;flex-wrap: wrap;}
footer .box .logo{width:30%; margin-left:auto; margin-right:auto;margin-bottom:20px;}
footer .box .navi{width:100%; }
footer .box .navi ul{justify-content: center;flex-wrap: wrap;}
footer .box .navi ul li{margin-left:5%; margin-right:5%; width:40%; text-align:center; margin-bottom:20px;}
footer .box .navi ul li:nth-child(1){text-align:right;}
footer .box .navi ul li:nth-child(2){text-align:left;}
footer .box .navi ul li.sns{width:10%;}
footer .box .navi .address{text-align:center;}
}


/*=======  下からフェードアップ（ラインナップ用）  =======*/
.fadeup_lineup {opacity: 0;}
.fadeup_lineup.isShow {  opacity: 1;animation: fadeup_lineup 1.0s ease 0.1s 1 normal backwards;}
@keyframes fadeup_lineup {
from {
    opacity: 0;
    transform: translateY(50px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}



/*=======  下からフェードアップ  =======*/
.fadeup {opacity: 0;}
.fadeup.isShow {  opacity: 1;animation: fadeUp 1.0s ease 0.5s 1 normal backwards;}
.delay01{animation-delay: 0.1s !important;}
@keyframes fadeUp {
from {
    opacity: 0;
    transform: translateY(50px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


/*=======  左からからフェードイン  =======*/
.fadein_from_left{opacity: 0;}
.fadein_from_left.isShow {  opacity: 1;animation:  fadein_from_left 1.0s ease 0.5s 1 normal backwards;}

@keyframes fadein_from_left {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*=======  右からからフェードイン  =======*/
.fadein_from_right{opacity: 0;}
.fadein_from_right.isShow {   opacity: 1;animation:  fadein_from_right 1.0s ease 0.5s 1 normal backwards;}

@keyframes fadein_from_right {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*=======  上からからフェードイン  =======*/
.fadein_from_top{opacity: 0;}
.fadein_from_top.isShow {   opacity: 1;animation:  fadein_from_top 1.0s ease 0.5s 1 normal backwards;}

@keyframes fadein_from_top {
  0% {
    opacity: 0;
    transform: translateY(-500px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@media screen and (max-width: 768px) {
.pc{display:none !important;}
}

@media screen and (min-width: 769px) {
.sp{display:none !important;} 
}



