@charset "utf-8";
/* CSS Document */

.maincont{padding-bottom: 100px}
.maincont .titbox{padding-bottom: 0}

.submess{font-size: 14px; padding-right: 10%; padding-top: 40px}
.about__text{padding-bottom: 20px}

.syamei{ font-family: 'Cormorant', serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.3;}
.syamei span{display: block; font-family: 'Noto Serif JP', serif;
    font-size: 11px;
    font-weight: 200;
    letter-spacing: 0.15em;
    margin-top: 4px;}
.syamei .min{text-align: left}
.syamei .logod{display: inline-block ; text-align: center; margin-bottom: 30px; margin-left: 32px}
.syamei .min{font-size: 18px; margin-bottom: 40px; line-height: 1.8}

.firstr .imgage{text-align: right}
.firstr .imgage img{width: 80%; margin: 0 0 30px auto}
.firstr .pagemenu{font-size: 20px}
.firstr ul{margin: 0 0 30px 0px; letter-spacing: 3px}
.firstr ul a {
  display: block; 
  font-weight: 500; 
  /* position: relative; ←ここから削除 */
}

.firstr ul a span {font-weight: 600;
  display: inline-block;
  position: relative; /* ←ここに移動！ */
}

.firstr ul a span::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%; /* これで span の幅に対して 100% になります */
  height: 1px;
  background: #253440;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}

/* ホバー時の挙動は a にホバーした時、または span にホバーした時、どちらでもお好みで */
.firstr ul a:hover span::after {
  transform: scale(1, 1);
}

#outline{padding: 80px 0 0 0}
.concept__title {line-height: 1.3;
  font-family: 'Cormorant', serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 5px;
}
.concept__subtitle {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  margin-bottom:30px;
}

#outline dt{background:#282828; color: #fff; padding:15px 20px; letter-spacing: 3px }
#outline dd{padding: 15px 0 30px 20px}
#outline dd span{font-size: 13px}

.subinline{display: inline-block; text-align: center}


#outline .tit{ font-size: 28px; margin-bottom: 30px; letter-spacing: 3px; padding-top: 20px}

/* マップをレスポンシブに対応させるための設定 */
.map-container {
  position: relative;
  width: 100%;
  padding-top: 600px; /* アスペクト比 16:9 の場合（4:3 にする場合は 75%） */
  overflow: hidden; 
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

@media screen and (max-width: 979px) {
.header{display: none}
.submess{padding: 0 ; line-height: 1.8;}
.aboutfirst{padding-top: 50px}
}

@media screen and (min-width: 980px) {
.header h1{display: none}
.maincont{margin: 50px 0 50px 6%;}
.aboutfirst{max-width: 100%; margin: -320px auto 0 0; padding: 0; display: flex; flex-direction: row-reverse; position: relative}
.titbox1{ display: inline-block}
.titbox1 .midashi{display: inline-block; text-align: center}
.titbox1 .midashi .en{ font-size: 22px; letter-spacing: 5px; line-height: 1}
.titbox1 .midashi span.hoge{font-size: 13px ;font-family: 'Noto Serif JP', serif;}

.titbox1 .min{font-size: 21px; letter-spacing: 2px;padding-top: 40px; line-height: 2.2}

.firstl{width: 45%; min-width: auto; flex: none; }
.titbox1 {
    position: sticky;
    top: 20px; /* 上部からどのくらい空けて固定するか（数値は調整してください） */
}
.firstl .headtext{text-align: center; display: inline-block}
.firstl .abb{ font-size: 40px; padding-top: 100px;
    letter-spacing: 5px;
    line-height: 1;
    margin-bottom: 10px;
}


.firstr{width: 55%; flex: auto; padding: 0; }
.firstr .imgage img{width: 100%; margin-bottom: 50px}
.firstr .pagemenu{font-size: 30px; padding-bottom: 10px}
.firstr ul a{padding: 3px 0}
.firstr ul{margin-bottom: 50px}

#outline{padding-top: 150px; padding-right: 6%}
.concept__title{font-size: 40px}
.outflex {
  display: flex;
  justify-content: space-between;
}

.outflexr, .outflexi {
  width: 48%;
  /* 左右の列自体も縦方向のFlexboxにする */
  display: flex;
  flex-direction: column;
}

/* 左右の列の中にある最後のdlを縦いっぱいに広げる */
.outflexr dl:last-child,
.outflexi dl:last-child {
  flex-grow: 1;
}

/* 縦いっぱいに広がったdlの中のddも高さを100%にする */
.outflexr dl:last-child dd,
.outflexi dl:last-child dd {
  height: 100%;
}

.outflex dl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1px;
}

#outline dt {
  width: 20%;
  padding: 15px 0 15px 20px;
}

#outline .outflex dd {
  width: 78%;
  padding: 15px 0 15px 20px;
  border-top: 1px solid #282828;
}

.outflexr .borderb {
  border-bottom: 1px solid #282828;
}

.outflexi dd {
  border-bottom: 1px solid #282828;
}
#outline .tit{padding-top: 80px}
.map-container { padding-top: 500px; }
  
  
  
}