@charset "UTF-8";
@import url(./reset.css);
@import url(./layout.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
    --width: 1280px;
    --sp: 24px;
    --noto: "Noto Sans JP";
    --notoserif: "Noto Serif JP";
    --maincolor: #333333;
    --mstudiocolor: #492288;
    --isautocolor: #dda800;
    --juhancolor: #0071bc;
    --seikotucolor:#2e4163;
    --gastcolor:#cc181f;
    --btncolor: #e1ff00;
    --inputcolor: #f6ff00;
    --totalcolor: #ffae00;
    --red: #fe0404;
    --black: #000000;
    --white: #ffffff;
}
*{
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
.wrapper {
    max-width: var(--width);
    margin: 0 auto;

    @media (width <= 640px) {
        padding-left: calc(var(--sp) / 2);
        padding-right: calc(var(--sp) / 2);
    }
}
img {
    max-width: 100%;
    height: auto;
}
.flexContainer {
    display: flex;
}

.mainContainer{
  min-height: 100vh;
  height: 100%;
  display: block;
  @media (width <= 640px) {
        min-height: auto;
        height: auto;
    }

  & img{
    min-height: 100vh;
        height: 100%;
        width: 100%;
        object-fit: cover;
    @media (width <= 640px) {
       min-height: auto;
       height: auto;
    }


  }
}
.indexContainer{
  justify-content: space-between;
  padding-top:120px;
  @media (width <= 640px) {
        flex-direction: column-reverse;
        padding-top:80px;
    }

}
.mapContainer{
  width: 48%;
  display: flex; /* Flexboxを有効にする */
    justify-content: center; /* 水平方向中央 */
    align-items: center; /* 垂直方向中央 */
  @media (width <= 640px) {
        width: 100%;
    }

}
.slideContainer{
width: 48%;
@media (width <= 640px) {
        width: 100%;
    }
}
/* タブメニューのスタイル */
.tab-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  justify-content: space-between;
}

.tab-menu li {
  padding: 10px 20px;
  background-color: #f0f0f0;
  border-bottom: 3px solid#e0e0e0;
  border-top: 3px solid #f0f0f0;
  cursor: pointer;
  width: 32%;
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 56px;
  margin-bottom: 4px;
  font-weight:600;
  font-family: var(--noto), sans-serif;
  @media (width <= 640px) {
        width:48%;
    }

}

.tab-menu li.active {
  /* background-color: #333333;
  border-bottom: 3px solid#333333;
  border-top: 3px solid#333333; */
  color: white;
}
.tab-content{
  visibility: visible;
  height: auto;
  position: relative;
}
.juhan,.tomituru,.seikotu,.mstudio,.isauto{
  position: relative;
  &::after{
    content: "";
    width: 20px;
    height: 6px;
    border-radius: 6px;
    background-color: var(--juhancolor);
    position: absolute;
    right: 8px;
    @media (width <= 640px) {
        width: 10px;
    }

  }
}
.juhan.active{
  background-color: var(--juhancolor);
  border-bottom: var(--juhancolor);
  border-top: var(--juhancolor);
}
.tomituru{
  &::after{
    background-color: var(--maincolor);
  }
  &.active{
    background-color: var(--maincolor);
  border-bottom: var(--maincolor);
  border-top: var(--maincolor);
  }
}
.seikotu{
  &::after{
    background-color: var(--seikotucolor);
  }
  &.active{
    background-color: var(--seikotucolor);
  border-bottom: var(--seikotucolor);
  border-top: var(--seikotucolor);
  }
}
.mstudio{
  &::after{
    background-color: var(--mstudiocolor);
  }
  &.active{
    background-color: var(--mstudiocolor);
  border-bottom: var(--mstudiocolor);
  border-top: var(--mstudiocolor);
  }
}
.isauto{
  &::after{
    background-color: var(--isautocolor);
  }
  &.active{
    background-color: var(--isautocolor);
  border-bottom: var(--isautocolor);
  border-top: var(--isautocolor);
  }
}

.link{
  position: absolute;
  background-color: #fff;
  z-index: 999999;
  bottom: 100px;
  right: 12px;
  padding: 12px;
  text-decoration: none;
  color: var(--maincolor);
}
article{
	font-family: var(--noto), sans-serif;
  position: absolute;
    z-index: 999;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    padding: 24px;
    width: 100%;
    line-height: 24px;
    font-weight: 900;
    & span{
      display: block;
      font-size: 14px;
      font-weight: normal;
    }
}
.gallery,.gallery2,.gallery3,.gallery4,.gallery5,.gallery6{
	margin:0 0 5px 0;
}
:is(.gallery,.gallery2,.gallery3,.gallery4,.gallery5,.gallery6) li{
list-style:none;
}

:is(.gallery,.gallery2,.gallery3,.gallery4,.gallery5,.gallery6) li>img{
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
    &::before{
      content: none;
    }
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
    &::before{
      content: none;
    }
}
.slick-current > div > li > img{
  opacity: 1;
}

/*選択するサムネイル画像の設定*/
:is(.choice-btn,.choice-btn2,.choice-btn3,.choice-btn4,.choice-btn5,.choice-btn6) li{
	cursor: pointer;
	outline: none;
list-style:none;
}

:is(.choice-btn,.choice-btn2,.choice-btn3,.choice-btn4,.choice-btn5,.choice-btn6) li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
  width: 98%;
  height: 80px;
  object-fit: cover;
}

:is(.choice-btn,.choice-btn2,.choice-btn3,.choice-btn4,.choice-btn5,.choice-btn6) li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

.aboutContainer{
  display:flex;
  margin-top: 60px;
  font-family: var(--notoserif), serif;
  justify-content: space-between;
  @media (width <= 640px) {
        flex-direction: column;
    }

}
.aboutContainer__right{
  background-image: url(../img/bg1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 48%;
  align-items: center;
  writing-mode:vertical-rl;
  text-orientation: upright;
  display:flex;
  justify-content: center;
  align-items: center;
  line-height: 36px;
  & h2{
    font-size: 24px;
  }
  & p{
    padding-top: 24px;
    padding-right: 48px;
  }
  @media (width <= 640px) {
        width: 100%;
    }
}
.aboutContainer__left{
  width: 48%;
  & h1{
    font-weight: 400;
    font-size: 50px;
    margin-top: 64px;
    @media (width <= 640px) {
        font-size: 40px;
    }

  }
  & p{
    line-height: 60px;
    font-size: 18px;
  }
  @media (width <= 640px) {
        width: 100%;
    }

}

.profileSection{
  background-image: url(../img/bg2.png);
  padding: 60px 0;
  margin: 60px 0 0;
  :is(h3){
    font-family: var(--notoserif);
    font-size: 30px;
    text-align: center;
    font-weight: normal;
    line-height: 42px;
    :is(span){
      display: block;
      font-size: 14px;
    }
  }
}
.profileContents{
  text-align: center;
  font-family: 'Noto Sans JP';
  line-height: 30px;
  padding: 48px 0;
  font-weight: 500;
  font-size: 15px;
  & .none{
    display: none;
    @media (width <= 640px) {
        display: inline;
    }
  }
}
.aboutImg{
  width: 50%;
  display: block;
  margin: 36px auto;
  @media (width <= 640px) {
        width: 100%;
    }

}
footer{
  background-color: var(--maincolor);
  color: var(--white);
}
.footerContainer{
  display:flex;
  padding-top: 24px;
  padding-bottom: 24px;
  font-family: var(--notoserif);
  justify-content: space-between;
  @media (width <= 640px) {
        flex-direction: column-reverse;
    }

}
.footerLogo{
  & img{
    width: 180px;
    @media (width <= 640px) {
        width: 100%;
        display: block;
        margin-top: 24px;
    }

  }
}
.footerLink{
  & ul{
    line-height: 36px;
    & li{
      & a{
        color: var(--white);
        text-underline-offset: 8px;
        &:hover{
          opacity: .5;
        }
      }
    }
  }
}