/*/// responsible /*/

.visible640,
.visible480,
.visible768,
.visible834,
.visible1024,
.brsp1024,
.brsp834,
.brsp768,
.brsp640,
.brsp480,
.disnone,
.sp{
	display: none ;
	}



/* @media screen and (min-width:1200px)  and (min-aspect-ratio: 15/9){


} */

@media screen and (max-width:1920px) {
  #contents{
    background-size:1920px;
  }
}
@media screen and (max-width:1300px){
  #news .news_contents {
    border-radius: 0;
  }
}
@media screen and (max-width:1024px){

  .brsp1024{
    display: inline;
  }
	.visible1024{
		display: block;
	}
	.hidden1024{
		display: none;
	}

  /*/----------------------------/*/

  /*//////// 1024 ///////////*/
}

@media screen and (max-width:834px){
  .brsp834{
    display: inline;
  }
	.visible834{
		display: block;
	}
	.hidden834{
		display: none;
	}
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }
/*-------------------------------*/
header {
  position: fixed;
  top: 0;
  z-index: 998;
}
#header .header {
  height: 55px;
  border-radius: 0;
  position: relative;
  z-index: 25;
}
#header .header hgroup {
  width: min(400px,80%);
  padding-left: min(40px, 3%);
}
#header .header hgroup .logotext p.mini{
  line-height: 1.5;
}
header .header .logoarea {
  width: 107px;
}
header .header .logoarea .text {
  padding-left: 10px;
  flex:0 1 73px;
}
header .header .logoarea .logo {
  flex:0 0 30px;
}
#header{
  padding:0;
}
#header .toggle_btn {
  display: flex;
}

.toggle_btn {
  background: var(--subColor);
  height: 100%;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 40;
}

.toggle_btn .humberger {
  background: white;
  width: 25px;
  height: 1px;
  position: relative;
}

.toggle_btn .humberger:after,
.toggle_btn .humberger:before {
  content: "";
  width: 25px;
  height: 1px;
  background: white;
  transition: .3s all ease-out;
}

.toggle_btn .humberger:after {
  position: absolute;
  top: -8px;
  left: 0;
}

.toggle_btn .humberger:before {
  position: absolute;
  bottom: -8px;
  left: 0;
}

#header.mopen .toggle_btn .humberger {
  background: transparent;
}

#header.mopen .toggle_btn .humberger:after {
  top: 0px;
  left: 0;
  transform: rotate(45deg);
}

#header.mopen .toggle_btn .humberger:before {
  bottom: 0px;
  left: 0;
  transform: rotate(-45deg);
}
.globalmenu_bg{
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(5px);
  --webkit-backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, .2);
  filter:brightness(1.1);
  position: fixed;
  top:0%;
  left:100%;
  opacity:0;
  transition:1s ease all;
  z-index: 22;
  transition: .3s all cubic-bezier(0.770, 0.000, 0.175, 1.000);

}

#header.mopen .globalmenu_bg{
  opacity:1;
  left:0%;
}

#globalmenu {
  background: var(--subColor);
  width: 80%;
  height: 100vh;
  position: fixed;
  top: 55px;
  left: 100%;
  z-index: 9998;
  transition: .3s all cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
#globalmenu ul{
  display: block;
}
#globalmenu ul li a{
  color:white;
  text-align: left;
}
#header.mopen #globalmenu {
  translate:-100% 0;
}

#globalmenu nav {
  height: 100%;
}

header #globalmenu nav>ul {
  display: block;
  z-index: 10;
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 80px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left:40px;
}

#globalmenu ul li {
  width: 100%;
  margin: .5rem 0;
}
header #globalmenu ul li a {
  display: block;
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 1em;
  position: relative;
  line-height: 1;
}

#globalmenu ul li a::after {
  width: 40px;
  background: #FFF;
  top: 50%;
  left: 0%;
  translate: -100% 0;
}

/*------------------*/
#contents .main_title_cont {
  width: min(480px,90%);
  height: 209px;
  translate: -50% -40%;
}
#contents .main_title_cont::before{
  translate: -50% -38%;
  width:120%;
}
.message_content .photoarea .imgs{
  aspect-ratio: 150 / 205;
  width:70%;

}
#message .message_content.flex .photoarea{
  flex:0 1 50%;
}

.rinen li {
  width: 300px;
}
.rinen li.elem01 {
  top: -55%;
}
.rinen li dl dt {
  margin-bottom: 5%;
}
.corp-policy_title {
  left: 35%;
  text-shadow: 1px 3px 3px rgba(0,0,0,.5);
}

#operation {
  margin-top: 0%;
}

  /*//////// 834 ///////////*/
}

@media screen and (max-width:769px){

  .brsp768{
    display: inline;
  }
  .visible768{
    display: block;
  }
  .hidden768{
    display: none;
  }
  .flex{
    display: block;
  }

  /*---------- top contents ---------*/

  .service_content .flex{
    display: block;
  }
  .service_content .photoarea .circle_ph{
    position: static;
    width:min(480px,90%);
    margin:-10% 0 0 auto;
  }
  .service_content .photoarea .circle_ph .ph{
    translate: 15% 0;
    width: 95%;
    margin:0 0 0 auto;

  }
  .service_content .textarea{
    padding-left:5%;
  }

  .circles{
    height: 50%;
    top: 50%;
    left: 25%;
    width: 95%;
  }
  .circles .wa01{
    top: -48%;
    right: -4%;
  }
  .circles .wa02{
    top: -3%;
    left: -8%;
  }
  .circles .wa03{
    bottom: -2%;
    left: 2%;
  }
    .group_content .shop_area{
    display: block;
    padding:0 10px;
  }
.shop_area .elem.long{
  display: block;
  gap:5%;
}
#post .element .thumbs{
  max-width: unset;
  height: auto;
  aspect-ratio: 16/9;

}
/*----- recruit-------*/

#recruit .pr_text{
  display: block;
}
#recruit .pr_text .imagearea{
  margin-bottom: 30px;
  aspect-ratio: 16/9;
}
  /*/----------------------------/*/

  #footer_contact .telfax p:before {
    padding:.4em .6em .3em;
    margin-right:.5em;
    font-size:15px;
  }
  /*//////// 768 ///////////*/
}



@media screen and (max-width:640px){
  .brsp640{
    display: inline;
  }
  .visible640{
    display: block;
  }
  .hidden640{
    display: none;
  }
  /*/----------------------------/*/
  #message .pc-headerarea{
    display: none;
  }
#message .sp-headerarea{
  display: flex;
  align-items: center;
  gap:10px;
  margin-bottom: min(40px,10%);
}
#message .sp-textarea h3{
  margin-bottom: 1em;
  font-size: min(23px,4.3vw);
}
#message .sp-textarea .parson{
  display: flex;
  align-items: center;
  color:var(--subColor);
  font-size: .8rem;
}
#message .sp-textarea .parson .name{
  font-size:1.2rem;
}
#message .section{
  margin-right:1.5em;
}
.message_content{
  padding:0;
  border:0;
}
.message_content::before{
  display: none;
}

#message .message_content.flex .textarea{
  padding-left:0;
}
  .corp-policy_content{
    width:100%;
    aspect-ratio: 1/2.5;
  }
  .corp-policy_content:before{
    content:"";
    display: block;
    width:min(500px,100%);
    height:80%;
    background:url(../../img/policy_bg_sp.jpg) no-repeat center center;
    background-size:cover;
    position: absolute;
    top:unset;
    left: calc(50% - 1px);
    bottom:0;
    translate:-50% 0%;
    z-index: 0;
  }
  .corp-policy_content:after{
    content:"";
    display: block;
    height:20%;
    width: 100%;
    position: absolute;
    right:0%;
    top:calc(20% - 2px);
    translate:0 0%;
    background:linear-gradient(to top, rgba(255,255,255,0) 0%, white 100%);
  }
  .rinen{
    height: auto;
    position: static;
    padding-bottom: 80%;
    width: min(500px,100%);
  }
  .rinen li.elem01,
  .rinen li.elem02,
  .rinen li.elem03{
    position: relative;
    top:unset;
    left:unset;
    right:unset;
    bottom:unset;
    translate:unset;
  }
  .operate li{
    flex:0 1 40%;
  }

#outline .grid {
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto;
  gap :40px;
}
#outline .grid .photoarea {
  grid-column: unset;
  grid-row: 3 / 4;
}
#outline .grid .titlearea {
  grid-column: unset;
}
#outline .grid .detailarea {
  grid-column: unset;
}
#outline .grid .photoarea .imgs{
  width: 85%;
  margin: auto;
}

.corp-policy_title {
  left: 50%;
  width: 100%;
  top: unset;
  bottom: 27%;
}

.rinen {
  padding-bottom: 600px;
}
.corp-policy_content::before {
  height: 60%;
}
.corp-policy_content::after {
  top: calc(40% - 2px);
}
.rinen li{
  position: relative;
}
.rinen li.elem01 {
  margin: 0 -5% 0 auto;
}
.rinen li.elem02 {
margin: -12% auto 0 0;
}
.rinen li.elem03 {
margin: -12% 0% 0 auto;
}
.rinen li dl {
width: 66%;
}

/* .recruit_nav ul{
  grid-template-columns: repeat(2, 1fr);
}
.recruit_nav ul li:last-child{
  grid-column: 2 span;
} */
 #recruit .job .outline th{
  width:7em;
}
  #footer_contact .flex{
    flex-wrap: wrap;
  }
  #footer_contact .telfax{
    border:0;
    border-bottom:1px solid var(--accentColor);
    padding:30px;
    padding:0 20px;
    margin:0 auto 30px;
  }
  #footer_contact .btnarea{
    flex: 0 1 260px;
    margin:0 auto 30px;
  }
  /*----- footer -------*/

  /*//////// 640 ///////////*/
}

@media screen and (max-width:480px){
  .brsp480{
    display: inline;
  }
  .visible480{
    display: block;
  }
  .hidden480{
    display: none;
  }
  .brsp480{
    display: inline;
  }
  /*/----------------------------/*/
  .service_content .photoarea{
    margin-top:10%;
  }

  .circles {
    left: 0;
    width: 100%;
  }
  .circles .wa01 {
    top: -14%;
    right: -38%;
  }
  .circles .wa02 {
    top: 9%;
    left: 8%;
  }
  .circles .wa03 {
    bottom: 2%;
    left: 15%;
  }

.circles .wa01 {
  width: 300px;
}
.circles .wa02 {
  width:200px;
}
.service_content .photoarea {
  margin-top: 10%;
}

.shop_area .shop_detail{
  display:block;
}

.googlemap{
  margin-top:30px;
  height: 2;
}
.shop_detail .googlemap iframe{
  height:200px;
}
.works{
  flex-wrap: wrap;
  gap:30px;
}
.works li{
  flex: 0 1 250px;
}
.shop_area .elem{
  position: relative;
}
.shop_area .elem:after{
  content:"";
  display: block;
  width:100px;
  background:#ccc;
  height:1px;
  position: absolute;
  bottom: 0;
  left:50%;
  translate:-50% -50%;
}

  .operate li {
    flex: 0 1 100%;
    display: flex;
    align-items: center;
    margin:0 3% 3% 3%;
  }

.operate li .imgs {
  flex: 0 0 35%;
}
.operate li .imgs img {
  width: 60%;
}
.operate li dl {
  flex: 0 1 80%;
}
.operate li dl dt {
  text-align: left;
}
.operate li dl dd p {
  text-align: left;
}

/*----------------------------------*/
.gototop{
  right:10px;

}

  /*/----------------------------/*/

  /*//////// 480 ///////////*/
}