/* ===============================
   acs共通
================================= */
.acs-bg{
    background-image: url("../img/all/haikei.jpg");
    background-repeat: repeat;
    background-size: auto;
    background-color:white;
}





/* ===============================
   acs-top
================================= */
.acs-top {
  padding:0 0 0 0;
}
.acs-top .area {
  display: grid;
  position: relative;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.acs-top .area h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 1;
}
.acs-top .area h1::before {
  content: "";
  position: absolute;
  top: calc(-100vh - 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100vh;
  background-color: #fff;
  z-index: 0;
}
.acs-top .area .image {
  grid-area: 1 / 1;
  z-index: 0;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}
.acs-top .area .image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.acs-top .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* ←暗さの度合い */
  z-index: 0;
}
@media only screen and (max-width: 768px) {
.acs-top .area {
  height: auto;
}
.acs-top .area .image {
  height:auto;
}
}












/* ===============================
   acs-sec01
================================= */
.acs-sec01 {
    padding:10% 0 0 0;
}
.acs-sec01 .area {
    width:80%;
    margin: 0 auto;
}
.acs-sec01 .area .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:10rem;
}
.acs-sec01 .area .wrap .left {
}
.acs-sec01 .area .wrap .left h2 {
    position: relative;
    font-size: 2rem;
    font-weight:bold;
}
.acs-sec01 .area .wrap .left h2::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100vw; /* 画面左端まで伸ばす */
  height: 1px;
  background-color: #000;
}
.acs-sec01 .area .wrap .left p {
    font-size: 1rem;
    margin-top:1rem;
}
.acs-sec01 .area .wrap .right {
  width: 50%;
  max-width: 600px;
}
.acs-sec01 .area .wrap .right .image{
    width:100%;
}
.acs-sec01 .area .wrap .right .image img{
    width:100%;
}
.acs-sec01 .area .wrap .left .list {
    margin-top:1rem;
  display: block;
  border: 1px solid black;
}
.acs-sec01 .area .wrap .left .list dl {
  display: flex;
  gap:1rem;
  border-bottom: 1px dotted black;
  align-items: flex-start;
  align-items: center;
}
.acs-sec01 .area .wrap .left .list dt {
  font-size:1.1rem;
  width:20%;
  font-weight: bold;
  box-sizing: border-box;
  background-color: #FCDCC5;
  padding: 1rem;
}
.acs-sec01 .area .wrap .left .list dd {
  width: 80%;
}
@media screen and (max-width: 768px) {
.acs-sec01 {
    padding:20% 0 0 0;
}
.acs-sec01 .area {
    width:100%;
    padding-inline:5%;
}
.acs-sec01 .area .wrap {
    flex-direction: column;
    gap:3rem;
}
.acs-sec01 .area .wrap .right {
  width: 100%;
  max-width: 100%;
}
}





/* ===============================
   acs-sec02
================================= */
.acs-sec02 {
  padding: 10% 0 0 0;
}

.acs-sec02 .area {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.acs-sec02 .area iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* スマホ用レスポンシブ調整 */
@media screen and (max-width: 768px) {
  .acs-sec02 .area {
    height: 400px; /* スマホでは少し低めに */
  }
}





/* ===============================
   acs-sec03
================================= */
.acs-sec03 {
  padding: 10% 0 0 0;
}
.acs-sec03.last {
  padding: 10% 0 10% 0;
}
.acs-sec03 .area {
}
.acs-sec03 .wrap01 {
    max-width:1100px;
    margin:0 auto;
}
.acs-sec03 .ttl {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin:0 auto;
  gap:1rem;
}
.acs-sec03 .ttl .icon {
    width:100px;
}
.acs-sec03 .ttl .icon img{
    width:100%;
}
.acs-sec03 .ttl h2 {
  font-size: 2rem;
}
.acs-sec03 .list {
    padding-top:5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.acs-sec03 .list dl {
}
.acs-sec03 .list dt {
  position: relative;
  font-size:1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.acs-sec03 .list dt::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%; /* 画面左端まで伸ばす */
  height: 1px;
  background-color: #000;
}
.acs-sec03 .list dd a{
    transition:0.3s;
}
.acs-sec03 .list dd a:hover{
    opacity:0.3;
}
.acs-sec03 .wrap02 {
    padding-top:5rem;
    max-width:100%;
    margin:0 auto;
}
.acs-sec03 .wrap02 img{
    width:100%;
    height:100%;
    object-fit: cover;
}
@media screen and (max-width: 768px) {
.acs-sec03 {
  padding: 20% 0 0 0;
}
.acs-sec03 .area {
    padding-inline:5%;
}
.acs-sec03 .wrap02 {
    padding-top:2rem;
    max-width:100%;
    margin:0 auto;
}
.acs-sec03 .list {
    padding-top:2rem;
}
}








/* ===============================
   acs-sec04
================================= */
.acs-sec04 {
  padding: 5% 0 0 0;
}
.acs-sec04 .area {
    background-color:antiquewhite;
    padding-block:5%;
}
.acs-sec04 .wrap {
  display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:3rem;
}
.acs-sec04 .wrap.reverse {
    flex-direction: row-reverse;
}
.acs-sec04 .wrap .left {
}
.acs-sec04 .wrap .left h3{
    font-size:2rem;
}
.acs-sec04 .wrap .left p{
    font-size:1rem;
    margin-top:1rem;
}
.acs-sec04 .wrap .image{
    width:100%;
    max-width:600px;
}
.acs-sec04 .wrap .image img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.acs-sec04 .toggle-content {
    margin:0 auto;
    padding: 3rem;
    background-color: #fff8f0;
    display: none;
    margin-top:2rem;
    max-width:1100px;
}
.acs-sec04 .toggle-content .box{
    width:100%;
    display: flex;
    align-items: center;
    gap:2rem;
    margin-bottom: 3rem; 
}
.acs-sec04 .toggle-content .box .image{
    width:30%;
}
.acs-sec04 .toggle-content .box .image img{
    width:100%;
    object-fit: cover;
}
.acs-sec04 .toggle-content .box p{
    width:70%;
}
.acs-sec04 .toggle-trigger {
    cursor: pointer;
    color: #8b5e3c;
    font-weight: bold;
    margin-top: 1rem;
    transition: color 0.3s ease;
}
.acs-sec04 .toggle-trigger:hover {
    color: #a86b3c;
}
@media screen and (max-width: 768px) {
.acs-sec04 {
  padding: 10% 0 0 0;
}
.acs-sec04 .area {
    padding-block:10%;
    padding-inline:5%;
}
.acs-sec04 .wrap {
    flex-direction: column;
    gap:2rem;
}
.acs-sec04 .wrap .left h3{
    font-size:1.25rem;
}
.acs-sec04 .toggle-content {
    width:100%;
    padding: 2rem;
}
.acs-sec04 .toggle-content .box{
    flex-direction: column;
    gap:0.5rem;
}
.acs-sec04 .toggle-content .box .image{
    width:100%;
}
.acs-sec04 .toggle-content .box p{
    width:100%;
}
}