@charset "utf-8";

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

/*====================================================================
  common
====================================================================*/
html.fixed,
body.fixed {
  overflow: hidden;
  width: 100%;
}

.sp_view {
  display: block;
}

.pc_view {
  display: none;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 100%;
  height: auto;
  overscroll-behavior: none;
}

@supports (height: 100dvh) {
  html,
  body {
    min-height: 100dvh;
  }
}

body {
  background: #fff;
  min-width: 100%;
  overflow-x: hidden;
}

#wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/*====================================================================
  loading
====================================================================*/
#loading .loading_logo img {
  width: min(120px, 32vw);
}

#loading .loading_line {
  margin: 20px auto 0;
}

@keyframes loadingLine {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: min(150px, 42vw);
    opacity: 1;
  }
}

/*====================================================================
  MV
====================================================================*/
#mv {
  background-position: center top;
}

#mv_wrap {
  width: calc(100% - 40px);
  margin: 0 auto;
  padding: 20px 0 0;
}

#mv_wrap h1 {
  width: 60vw;
  max-width: 280px;
}
#mv h1 {
 margin-left: 1%; 
}
#mv_wrap h1 img {
  width: 100%;
  height: auto;
}

#mv_wrap a#bt_instagram {
  top: 4.0vh;
  right: 0;
  width: 10.0vw;
}

#mv_wrap a#bt_instagram img {
  width: 100%;
  height: auto;
}

#copy {
  top: 19vh;
  left: 30%;
  width: min(40vw, 180px);
}

#copy img {
  width: 100%;
  height: auto;
}

/*====================================================================
  navigator
====================================================================*/
#navigator {
  height: auto;
  padding: 18px 15px;
}

#navigator ul {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 20px;
}

#navigator ul li {
  width: calc(50% - 10px);
  text-align: center;
}

#navigator ul li a {
  display: block;
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

/*====================================================================
  section common
====================================================================*/
.sec {
  width: calc(100% - 40px);
}

/*====================================================================
  concept
====================================================================*/
#concept {
  background: url("../images/bg_concept.webp") repeat-y center top;
  background-size: 150% auto;
  padding: 60px 0;
}

#concept h2 {
  margin-bottom: 35px;
}

#concept h2 img {
  width: 90%;
  height: auto;
}

#concept p.txt {
  width: 90%;
  font-size: 3.8vw;
  line-height: 2;
  margin: 0 auto 3.0vh;
  padding: 0 0;
}

/*====================================================================
  photo section
====================================================================*/
.photo-section {
  padding: 0vh 3.0vw 3.0vh;
}

.photo-grid {
  max-width: 100%;
  gap: 3.0vw;
}

.photo-card {
  width: 100%;
  border-radius: 10px;
  margin: 0px auto 2.0vh;
}

.photo-grid .photo-card:nth-child(1),
.photo-grid .photo-card:nth-child(2) {
  margin-top: 0;
}

.photo-card img {
  width: 100%;
}

.photo-card:nth-child(1).is-visible {
  transition-delay: 0s;
}

.photo-card:nth-child(2).is-visible {
  transition-delay: 0.15s;
}

.photo-card:nth-child(3).is-visible {
  transition-delay: 0.3s;
}

/*====================================================================
  contact box
====================================================================*/
.contact_box {
  width: calc(100% - 40px);
  height: auto;
  padding: 3.2vh 4.0vw 2.8vh;
  background-position: center center;
  background-size: 100% auto;
  background-color: #243a5e;
  margin: 0 auto 20px;
  border-radius: 12px;
}

.contact_box h3 {
  font-size: 5.0vw;
  line-height: 1.3em;
  margin-bottom: 0.6vh;
}

.contact_box .tel {
  font-size: 10vw;
  line-height: 1.1;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contact_box .tel::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 38px;
  background: url("../images/ic_tel.svg") no-repeat 0px 0.8vh;
  background-size: 24px auto;
  flex: none;
}

.contact_box .open {
  font-size: 3.0vw;
  line-height: 1.7;
  margin-bottom: 1.5vh;
}

.contact_box .bt_insta {
  width: 100%;
}

.contact_box .bt_insta a {
  font-size: 3.4vw;
  line-height: 1.5;
  padding: 16px 14px 16px 46px;
}

.contact_box .bt_insta a::before {
  left: 18px;
  width: 24px;
  height: 24px;
}
/*====================================================================
  shijyou
====================================================================*/
#shijyou {
  padding: 6.0vh 0 7.0vh;
}
  #shijyou .sec {
    width: 90%;
    border-radius: 5.0vw;
    padding: 4.5vh 5.0vw 5.0vh;
    box-shadow: 0 14px 40px rgba(24, 44, 74, 0.08);
  }
  #shijyou .title {
    margin: 0 0 3.0vh;
    padding-bottom: 2.0vh;
    text-align: center;
    line-height: 1.4em;
    font-size: 6.8vw;
  }
  #shijyou p {
    margin: 0 0 2.5vh;
    font-size: 3.6vw;
    line-height: 2.0em;
  }
  
  #shijyou .bt_insta {
  width: 100%;
}

#shijyou .bt_insta a {
  font-size: 3.4vw;
  line-height: 1.5;
  padding: 16px 14px 16px 46px;
}

#shijyou .bt_insta a::before {
  left: 18px;
  width: 24px;
  height: 24px;
}
  
  
/*====================================================================
  company
====================================================================*/
#company {
  padding: 6.0vh 0 7.0vh;
}

#company .sec {
  width: calc(86% - 5.0vw);
}

#company .title {
  margin: 0 0 45px;
}

#company .title img {
  width: min(220px, 60vw);
}

#company .flex {
  display: block;
}

#company .textbox,
#company .photobox {
  width: 100%;
}

#company .photobox {
  min-height: auto;
  margin-top: 35px;
}

#company table {
  table-layout: auto;
}

#company table tr {
  display: block;
  padding: 18px 0;
}

#company table th,
#company table td {
  display: block;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

#company table th {
  margin-bottom: 8px;
  font-size: 4.0vw;
  line-height: 1.7;
  white-space: normal;
}

#company table td {
  font-size: 3.6vw;
  line-height: 1.9;
}
#company table tr:last-child th,
#company table tr:last-child td {
  padding: 0px;
}
  
  
#company .nest_photo {
  min-height: 0;
  padding-bottom: 70px;
}

#company .nest_photo img:first-child {
  width: 82%;
  position: relative;
  top: auto;
  left: auto;
}


/*====================================================================
  business
====================================================================*/
#business {
 padding: 6.0vh 0 7.0vh;
}

#business .sec {
  width: calc(86% - 5.0vw);
}

#business .title {
  margin: 0 0 45px;
}

#business .title img {
  width: min(220px, 60vw);
}

#business .business_list {
  grid-template-columns: 1fr;
  row-gap: 50px;
}

#business .photo {
  margin-bottom: 18px;
}

#business .textbox h3 {
  font-size: 6.0vw;
  line-height: 1.4;
}

#business .textbox .address {
  font-size: 3.8vw;
  line-height: 1.8;
  padding: 0 0 12px;
}

#business .textbox .text {
  font-size: 3.8vw;
  line-height: 2;
  margin-top: 14px;
}

/*====================================================================
  contact
====================================================================*/
#contact {
  padding: 5.5vh 0 5.0vh;
}

#contact .sec {
  width: calc(96% - 5.0vw);
}

#contact .title {
  margin: 0 0 40px;
}

#contact .title img {
  width: min(260px, 72vw);
}

#contact .contact_lead {
  width: 100%;
  margin: 0 auto 4.0vh;
  font-size: 3.0vw;
  line-height: 1.6em;
  letter-spacing: 0.04em;
  border-radius: 14px;
  padding: 2.5vh 2.0vw;
}

/*====================================================================
  footer
====================================================================*/
#footer .footer_bg {
  background-size: auto 72%;
  background-position: right -100px bottom;
  opacity: 0.2;
}

#footer .footer_inner {
  width: calc(100% - 40px);
  padding: 42px 0 48px;
}

#footer .footer_logo {
  margin-bottom: 20px;
}

#footer .footer_logo img {
  width: min(110px, 28vw);
}

#footer .footer_info {
  margin-bottom: 34px;
}

#footer .footer_name {
  line-height: 1.5;
  margin-bottom: 2.0vh;
}

#footer .footer_name span {
  font-size: 1.2em;
  display: block;
  margin-top: 6px;
}

#footer .footer_address {
  font-size: 3.4vw;
  line-height: 1.8;
}

#footer .footer_tel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10vw;
  line-height: 1.1;
  padding-left: 0;
}

#footer .footer_tel a::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 38px;
  background: url("../images/ic_tel.svg") no-repeat 0px 0.8vh;
  background-size: 24px auto;
  flex: none;
}

#footer .footer_time {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 24px;
}

#footer .footer_nav ul {
  display: block;
}

#footer .footer_nav li {
  padding: 0;
}

#footer .footer_nav li:not(:last-child) {
  margin-bottom: 12px;
}

#footer .footer_nav li:not(:last-child)::after {
  display: none;
}

#footer .footer_nav a {
  font-size: 4.2vw;
  line-height: 1.6em;
}

#footer .footer_copy {
  padding: 3.0vh 0px;
}

#footer .footer_copy p {
  font-size: 3.2vw;
  line-height: 1.6;
}

}