@charset "utf-8";

body {
  position: relative;
}

/*--------------------------------------------------------------------------------
  共通
--------------------------------------------------------------------------------*/

/*
.company {
  margin: 0 auto;
  padding: clamp(40px, 7%, 100px) 2.5vw;
}
*/

.anchor {
  display: block;
  padding-top: 180px;
  margin-top: -180px;
}


/*--------------------------------------------------------------------------------
  理念
--------------------------------------------------------------------------------*/

.mv {
}

.catch {
  width: 90%;
  padding-top: 60px;
  margin: 0 auto;
}

.catch h2 {
  color: #76a315;
  font-size: clamp(16px, 5vw, 32px);
  font-weight: 700;
  font-family: var(--ff_zen);
  text-align: center;
  overflow: hidden;
}

.catch h2 span {
  display: inline-block;
}

.catch h2 .font-big {
  font-size: clamp(28px, 5vw, 60px);
}

.mv-img {
  width: 90%;
  margin: 40px auto;
}

.mv-img img {
  width: 100%;
  height: auto;
}

/*
@media screen and (max-width: 1200px) {
  .mv {
    height: 80vh;
    position: relative;
    background: url(../image/company/mv.jpg);
    background-size: cover;
    background-position: center;
    margin-top: 153px;
  }
}

@media screen and (max-width: 1024px) {
  .mv {
    height: 60vh;
    position: relative;
    background: url(../image/company/mv.jpg);
    background-size: cover;
    background-position: center;
    margin-top: 153px;
  }
}

@media screen and (max-width: 750px) {
  .mv {
    height: 70vh;
    background: url(../image/company/mv_sp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .catch {
    top: 52%;
  }
}
*/
@media screen and (max-width: 1200px) {
  .mv {
    margin-top: 153px;
  }
}

@media screen and (max-width: 530px) {
  .mv {
    margin-top: 170px;
  }
}


/*--------------------------------------------------------------------------------
  アンカーリンク
--------------------------------------------------------------------------------*/

.ankerlink_nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(30px, 7%, 60px) 2.5vw;
}

.ankerlink_nav li {
}
.ankerlink_nav li:last-child {
  margin-right: 0;
}

.ankerlink_nav li a {
  background: var(--cl_navy);
  border-radius: 100px;
  padding: 15px 30px 15px 15px;
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 auto;
  transition: all .3s;
  color:#fff;
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: normal;  
}
.ankerlink_nav li a:hover {
  opacity: 0.9;
}
.ankerlink_nav li a::after {
  content: "";
  display: inline-block;
  background-image: url(../image/icon/arrow_white.svg);
  background-size: contain;
  width: 16px;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  right: 16px;
  transition: all .3s;
  transform: translateY(-50%) rotate( 90deg );
}
.ankerlink_nav li a:hover::after {
  top: 60%;
}

@media screen and (max-width:550px) {
  .ankerlink_nav li a span {
    display: none;
  } 
}


/*--------------------------------------------------------------------------------
  事業内容
--------------------------------------------------------------------------------*/

#business {
  background: #95b74d;
  padding: clamp(40px, 7%, 100px) 0;
}

.business_wrap {
  padding: 0 2.5vw;
}

.business_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, calc(20 / 1200 * 100vw), 40px);
  margin: clamp(30px, 5%, 80px) 0 0;
}

.business_list li img {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.introduced,
.ending {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: clamp(25px, 5%, 40px) 25px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 10px;
  margin-top: clamp(12px, calc(20 / 1200 * 100vw), 40px);
  font-size: clamp(14px, 1.5vw, 16px);
}

.introduced .bn_img,
.ending .bn_img {
  width: 300px;
}

.introduced .bn_content,
.ending .bn_content {
  width: calc(100% - 330px);
}

.introduced h3,
.ending h3 {
  color: var(--cl_navy);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
}
.introduced h3 { color: #D7A80C; }
.ending h3 { color: #e4777a; }

.introduced p,
.ending p {
  margin-top: 1em;
}

@media screen and (max-width: 960px) {
  .business_list {
    grid-template-columns: 1fr;
  }

  .business_list li {
    aspect-ratio: 1/0.32;
  }

  .business_list li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 11%;
  }
}

@media screen and (max-width: 770px) {
  .introduced .bn_img,
  .ending .bn_img {
    width: 200px;
  }

  .introduced .bn_content,
  .ending .bn_content {
    width: calc(100% - 220px);
  }  
}

@media screen and (max-width: 530px) {
  .introduced,
  .ending {
    display: block;
  }
  .introduced .bn_img,
  .ending .bn_img {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px;
  }
  .introduced .bn_content,
  .ending .bn_content {
    width: 100%;
  }  
}


/*--------------------------------------------------------------------------------
  会社概要
--------------------------------------------------------------------------------*/

#profile {
  padding: clamp(40px, 7%, 100px) 0;
  background-color: #e6e6e6;
}

.profile_wrap {
  padding: 0 2.5vw;
}

#profile .section_ttl h2,
#profile .section_ttl p {
  color: var(--cl_main);
}

#profile table {
	width: 100%;
  max-width: 1168px;
	margin: 40px auto 0;
	border-collapse:collapse;
  font-size: clamp(14px, 1.8vw, 16px);
	text-align:left;
	border:1px solid #F5F8ED;
}
#profile table th {
	white-space:normal;
	width:140px;
	text-align:left;
	background-color:#e4edd0;
	padding:13px;
	border-bottom:1px solid #F5F8ED;
	border-right:1px solid #F5F8ED;
	vertical-align:top;
	box-sizing: border-box;
}
#profile table td {
	white-space:normal;
	padding:13px;
	border-bottom:1px solid #F5F8ED;
	border-right:1px solid #F5F8ED;
	background-color:#ffffff;
	box-sizing: border-box;
}

@media screen and (max-width: 640px) {
  #profile table {
    display: block;
  }
  #profile table tbody {
    display: block;
  }
  #profile table tr {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
	#profile table th {
		display:block;
    width: 26%;
	}
	#profile table td {
		display:block;
    width: 74%;
	}
}


/*--------------------------------------------------------------------------------
  店舗情報・アクセス
--------------------------------------------------------------------------------*/

#access {
  padding: clamp(40px, 7%, 100px) 0;
}

.access_wrap {
  padding: 0 2.5vw;
}

#access .section_ttl h2,
#access .section_ttl p {
  color: var(--cl_main);
}

.information_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, calc(20 / 1200 * 100vw), 40px);
  margin: clamp(30px, 5%, 80px) 0 0;
}

.information {
  font-size: clamp(14px, 1.8vw, 18px);
}

.information .logo {
  width: 100%;
  max-width: 376px;
  margin-bottom:30px;
}

.information dl {
  display: flex;
  justify-content: space-between;
  font-weight: normal;
  margin-top: 1em
}
.information dt {
  width: 3em;
}
.information dd {
  width: calc(100% - 3em);
}

.information .notes {
	background-color:#ddd;
	padding:15px;
  border-radius: 6px;
  font-size: clamp(12px, 1.8vw, 15px);
	margin-top:20px;
}

.gmap iframe {
  width: 100%;
  height: 450px;
  margin-top: clamp(30px, 5%, 80px);
}

@media screen and (max-width:770px) {
  .information_wrap {
    display: block;
  }
  .information {
    margin-bottom: 30px;
  }
  .information .address {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, calc(20 / 1200 * 100vw), 40px);
  }
  .information dl {
    margin-top: 0;
  }
}

@media screen and (max-width:520px) {
  .information .logo {
    max-width: 300px;
    margin: 0 auto 20px;
  }
  .information .address {
    display: block;
  }
  .information dl {
    margin-top: 1em;
  }
}