@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: hsc_ultimate
Version: 20190705
---------------------------------------------------------*/
/*初期化*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
* { margin: 0px; padding: 0px; line-height:1.2; word-wrap: break-word; }
ul { list-style: none; }
ol  { display: block; text-align:left; list-style-type: disc; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start:1.5em; }
a {text-decoration:underline; font-size:100%; overflow:hidden; outline:none; }
img, a img { border: none; text-decoration:none; max-width:100%; }
.clearBoth { clear:both; font-size:1px; height:0; text-align:center; }
iframe { vertical-align: bottom;}
strong { font-weight:bold;}
main { position:relative; }
img { vertical-align: middle;}

.grecaptcha-badge { visibility: hidden; }

/*---------------------------------------------------------
common
---------------------------------------------------------*/
html {    font-size: 62.5%; }
/* Text elements */
body { color:#333;}


body { font-size:1.6em; text-align: center;font-family: 'Noto Serif JP', serif;  }
body { color:#FFF; background-color:#21213C}
h1,h2,h3,h4,h5,h6 { font-size:100%;}
a { color: #666; text-decoration: none; }
a:hover { text-decoration:underline;}
a:hover { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }

/*pの設定*/
p {text-align:left; line-height:1.4;}
p+p { margin-top:19px;  line-height:1.7; }/*pが連続していたら、マージン*/
.fa { margin-right:5px; font-size:130%;}/*アイコンフォントの右側のつまりすぎとちょっと小さいのを解消*/






/*---------------------------------------------------------
common
---------------------------------------------------------*/

#wrapper { position:relative;}

/*ヘッダー設定*/
header { position: fixed; top:0; left:0; width:100%; z-index:9999;}
header h1 img { width:200px; padding:5px}

/*スマホナビメニューの色*/
.navimenu_icon { color:#CCC; padding-right:10px;}
ul#menu-glnv>li a { font-size: 1.4rem; font-weight: bold; color:#333; text-decoration:none; opacity:0.8; }/*ナビゲーションの文字*/
/*キービジュアル設定*/


/*キービジュアル第二階層設定*/
body:not(.home)  #keyvisual_wrap { background-image:url(/images/bg/keyvisual_wrap.jpg);  background-repeat:no-repeat; background-size: cover; background-position:center;}
main { background-color:#FFF;}


.secont_page_title{ display:flex;  align-items: center;  justify-content: center; font-size:2.3rem; color:#5F6C7F; font-weight:bold; padding:120px 0 60px 0 }
.secont_page_title::before,.secont_page_title::after{  content: "";  width:20px;  border-top: 1px solid #5F6C7F;}
.secont_page_title:before {  margin-right: 1rem; }
.secont_page_title:after {  margin-left: 1rem; }



.maincolor { color:#5F6E81;}
.bg_maincolor { background-color:#D71044;}
#catch2 { border-top:#D2B852 5px solid; background-color:#F7F5EA}



#page-top { background-color:#687688; color:#FFF; opacity:0.6;}

.hun_menu {height: 50px;    position: absolute; top: 0px;    width: 72px; z-index:999;left: 50%; padding-left:5px;
  transform: translateX(-50%) scaleX(1); /* 横中央配置＋拡大はまだ */
  transform-origin: center;
  transform-origin: center;   /* 拡大の基準点を中心にする */
  transform: scaleX(2.0);  }
a.hun_menu:hover { opacity:1!important;}
.menu__line{ display: block;    height: 2px;    position: absolute;    transition:transform .3s;    width:36px; background-color:#FFF}
.menu__line--top{ top:12px;}
.menu__line--center{    top: 23px;}
.menu__line--bottom{    bottom: 14px;}
.menu__line--top.active{    top: 24px;width:36px;    transform: rotate(45deg);}
.menu__line--center.active{    transform:scaleX(0);}
.menu__line--bottom.active{    bottom: 24px;width:36px;    transform: rotate(135deg);}



nav { display: none;    height: 100%;    position: fixed;    width: 100%;    z-index: 998; top:0; right:0;}
.gnav__wrap{    align-items:flex-start;    display: flex;    height: 100%;    justify-content: left;    position: absolute;    width: 100%; padding:30px;}
ul#menu-glnv>li { padding:20px 0;}
ul#menu-glnv>li a { display:block; font-size:2rem;}
ul#menu-glnv  { position: none;  width: 100%; height:100%;}
.sub-menu { display:none; padding-left:20px}
ul#menu-glnv>li ul.sub-menu li a { color: #FFF ; }/*プルダウンの文字の色*/
ul#menu-glnv>li { border-bottom:rgba( 255, 255, 255, 0.0) solid 1px; width:100%; position:relative;}
li.menu-item-has-children > a:after { font-family: 'Material Icons';  content: "\e313"; font-weight: 900; position: absolute ;	top: 20px;	right:0; } 
#menu-glnv li.yajirusiue > a:after {font-family: "Material Icons"; content: "\e5ce"; font-weight: 900;position: absolute ;	top:20px ;	right: 0 ;}





nav { background-color:rgba( 33, 33, 60, 0.9 );}
.menu__line { background-color:#FFF;}/*背景*/
/*スマホメニューバー*/
 ul#menu-glnv>li a { color:#FFF;}
 .secont_page_title{ padding:90px 0 60px 0 }
 
header h1 img { width: 150px; padding:5px;}
 



@media screen and (min-width: 768px){/*パソコンのみの設定*/

#maincatch { height:531px;}
#maincatch {padding:60px 0 60px 0;}

/*ナビゲーション設定*/
nav { background-color:none; width:695px; margin:auto;}/*ナビゲーションの背景色*/
ul#menu-glnv { padding-top:100px;}
ul#menu-glnv>li {padding:20px 0; padding-left:50px; text-align:left;}
ul#menu-glnv>li a { color:#FFF;}
#menu-glnv > li a:hover { color: #ccc; }/*マウスオーバー時*/
#menu-glnv > li:hover > a { opacity:0.7; }/*ナビゲーションの文字にカーソルがある時の色*/
.current-menu-item a { }/*ナビゲーションカレントの背景設定*/
/*ナビゲーション　プルダウンの設定*/
li ul.sub-menu { width:280px; }/*プルダウンの幅*/
li ul.sub-menu li a { color: #333 !important; }/*プルダウンの文字の色*/
ul#menu-glnv>li { background:url(/images/parts/navi.png) no-repeat }/*ナビゲーションの文字の間の装飾*/
ul#menu-glnv>li:first-child { background:none;}/*ナビゲーションの文字の間の装飾を一番最初は削除している*/
/*ul#menu-glnv>li.current-menu-item a { color: #FFFF!important; background:none;}カレントメニューデザイン*/
ul#menu-glnv>li.innt a { color:#333 }
}


/*-------------------------------------------------------------------------------------*/
/*タイトルデザイン* 
/*-------------------------------------------------------------------------------------*/
.design_title01 { background:url(./images/bg_title.png) no-repeat bottom center; font-size:3.3rem; text-align:center; padding-bottom:35px; margin-bottom:3.0rem;}

.design_title02 { background: url(/images/bg_title02.png) no-repeat left center;; font-size:2.2rem; text-align:left; padding-left:50px; margin-bottom:3.0rem;}
.design_title03 { color:#003333; font-size:23px; border-left:#003333 solid 3px; padding-left:10px; font-weight:bold; display:block; }
.single_title { font-size:26px; padding:20px; margin-bottom:15px; color:#D71044;}

.title001 { font-size:6.6rem; margin-bottom:50px;}
.topred:first-letter { color:#D71044;}

.blog_title { background:url(/images/title_bg.png) no-repeat center bottom; font-size:2.8rem; color:#687688; padding-bottom:50px;}

.privcont { font-weight:bold;}



/*-------------------------------------------------------------------------------------*/
/*ボタン設定* 
/*-------------------------------------------------------------------------------------*/
.btn01 { background-color:#F5F5F5; font-weight:bold;  display: inline-block; padding:2.5rem 4rem; text-align:center; 
-box-sizing: border-box;  -webkit-transition: all .3s;  transition: all .3s; min-width:172px; color:#606F82;}
.btn01:hover {  background-color: #000; color:#FFF; text-decoration:none; opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha( opacity=100 )"; }

.btn02 { background-color:#DDCA81; font-weight:bold;  display: inline-block ; padding:1.5rem;  text-align:center; 
-box-sizing: border-box;  -webkit-transition: all .3s;  transition: all .3s;min-width:172px;}
.btn02:hover {  background-color: #000; color:#FFF; text-decoration:none; opacity: 1; filter: alpha(opacity=100); -ms-filter: "alpha( opacity=100 )"; }


/*-------------------------------------------------------------------------------------*/
/*横幅縦幅、各種必要マージン設定*/
/*-------------------------------------------------------------------------------------*/
.width { width:1080px; margin-left:auto; margin-right:auto;}

.contents { width:810px; float:left;}
#side_contents { width:230px; float:right;}



@media screen and (min-width: 320px) and (max-width: 768px) {/*スマホのみの設定*/
#keyvisual { height:880px;}
#maincatch { height:650px;}

.catch { padding:80px 20px;}

ul#menu-glnv { padding-top:100px;}

ul#menu-glnv>li { background:none; }/*ナビゲーションの文字の間の装飾を削除*/
	
.title001 { font-size:30px; margin-bottom:50px;}
.topred:first-letter { color:#D71044;}

ol.jccinfo li { list-style:decimal; margin-bottom:20px;}
.t60 { font-size:30px !important;}
}




/*---------------------------------------------------------
original
---------------------------------------------------------*/

/*topヒーロー*/
 .hero {    position: relative;    width: 85%;    height: 100vh;    overflow: hidden;  }
  .hero-half {    position: absolute;    width: 50%;    height: 100%;    overflow: hidden;    transform-origin: center center;  }
  .hero-left { left: 0; }
  .hero-right { right: 0; }
  .hero-half img {    width: 100%;    height: 100%;    object-fit: cover;  }
  .hero-text {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    color: white;    text-align: center;    z-index: 10;    opacity: 0;    animation: fadeIn 2s ease forwards 1s;  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
  .thankyou {    position: absolute;    left: 50%;    bottom:-22px;    transform: translate(-50%, 50%);    opacity: 0; /* 初期は非表示 */    z-index: 10; width:100%;}
  .thankyou.show {    animation: floatUp 1s ease forwards; /* 2秒で完全表示 */  }
  @keyframes floatUp {
    0% {
      transform: translate(-50%, 50%);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -20%);
      opacity: 1;
    }
  }
  
  
  
  /*TOP右メニュー*/
.toprightcon { position:absolute; width:15%; top:100px; right:0;}  
.section01 { width:80%; margin:100px 0;}


 @media screen and (max-width: 768px){
.toprightcon { position:absolute; width:100%; top:0px; left:0; }
.sp_logoset { position:absolute; top:0; left:0; width:100px;}


.hero {  position: relative;    width: 100%;    height: 90vh;    overflow: hidden; top:10vh;}	
.hero-half {width: 100%;    height: 45vh;    overflow: hidden;    transform-origin: center center;  }
.hero-left { left: 0; }
.hero-right { right: 0; top:45vh;}
.hero-right img {object-fit: cover;}
.thankyou {bottom:-10px;  }
.section01 { width:90%; margin:200px auto 100px auto;}
} 
  
  
  
  
  

  

@media screen and (max-width: 768px){
		ul.newslist003 {grid-template-columns: 1fr 1fr;column-gap:3%;}
		ul.newslist003 li { padding:5px;}
		ul.newslist003 .blogcon { padding:5px 0px;}
		ul.newslist003 img.blogphoto {object-fit: cover; width:100%; height:100px;}
		ul.newslist003 .blogcon h3 { line-height:1.3; text-align:left;}
		ul.newslist003 li .category-n { position:absolute; top:0px; left:0px; font-size:10px; padding:5px; width:80px; }
		.zoom {width:100%; height:100px;
  display: inline-block;     
  overflow: hidden;         
}
}




/*写真スライド*/

.photo-slider {  width: 100%;  overflow: hidden;  position: relative; padding-bottom:100px;}

.photos {  display: flex;  animation: scroll 12s linear infinite;}
.photos img {  width: 250px;  margin-right: 20px;  opacity: 0;  transform: scale(0.8) rotate(20deg);  transition: opacity 1s ease, transform 1s ease;
}

/* 表示時アニメーション */
.photos img.visible {  opacity: 1;  transform: scale(1) rotate(0deg);}

/* 無限スクロール（左方向） */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}




.animation-section {            position: relative;                  }
        #animation-section {  background-color: #F3F3F3;  height: 400vh; }
        #animation-section-2 {background-color: #21213C;  height: 380vh; }

/* スティッキーコンテナ */
.sticky-container {            position: sticky;            top: 0;            height: 100vh;            overflow: hidden;            display: flex;            flex-direction: column;            justify-content: center;            align-items: center;
        }
        
        /* 1. アニメーション内のコンテンツを格納するコンテナを追加 */
.animation-content-wrapper {
  width: 1080px; /* 最大幅を1080pxに固定 */
            height: 100%;
            position: relative; /* 子要素のabsolute基準 */
            display: flex;
            align-items: center; /* 垂直中央寄せ */
            justify-content: flex-start; 
        }

        .header-title {  position: absolute;  left:43px;  
            top: 30px; /* 上端近くに配置 */
            transform: none;   z-index: 999;         }

        .fixed-text-secondary {  position: absolute;  right: 0; top: 50%; transform: translateY(-50%); z-index: 998; width:580px;}

        .image-container {
            position: absolute;
            top: 0;
            left: 0; 
            height: 100%;
            display: flex;
            justify-content: flex-start; /* 画像を左寄せ */
            align-items: center; /* 垂直中央寄せ */
            will-change: transform; /* opacityを削除 */
            opacity: 0;
            transform: translateY(100vh);
        }
        
        /* 最初の画像のみ、初期状態で表示する */
        #image1-container, #image5-container {
            opacity: 1;
            transform: translateY(0vh);
            z-index: 20;
        }
        
        /* max-widthを固定値(50%)に設定 */
        .image-container img {
            width: 462px; 
            object-fit: contain;
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            /* 画像を左に寄せるためにマージンを調整 */
            margin-left: 0; 
            margin-right: auto;
        }
		
		
@media screen and (max-width: 768px){
	.animation-content-wrapper {  width: 100%;    }
.header-title {left:10px;            top: 30px;      }
.fixed-text-secondary {  position: absolute;  left: 10px; right:auto; top: 500px; transform: translateY(-50%); z-index: 998; width:70%;}
.image-container img { width: 180px;     }
.image-container {            position: absolute;            top: 0;            left: auto; right:0;             height: 50%;            display: flex;            justify-content: flex-start;            align-items: center;             will-change: transform;             opacity: 0;            transform: translateY(50vh);        }		

	
.photo-slider {  width: 100%;  overflow: hidden;  position: relative; padding-bottom:100px; margin-top:0px}

.photos {  display: flex;  animation: scroll 12s linear infinite;}
.photos img {  width: 150px;  margin-right: 20px;  opacity: 0;  transform: scale(0.8) rotate(20deg);  transition: opacity 1s ease, transform 1s ease;
}

.boido { height:100px;}
	

}

.compo { width:80%;}
.toiawase { border-bottom: #90909D 1px solid; padding:100px 0; background-color:#2D2D4B}


@media screen and (max-width: 768px){
.compo { width:96%; margin-left:auto; margin-right:auto;}	
.toiawase {padding:30px 0; }
	.toiawase>div { margin-bottom:20px;}
}


/*ニュース＆トピックス*/
#newstopix { position:relative; min-height:500px;}
.newstopix001 { position:absolute; left:60px;}
.newstopix002 { position:absolute; width:950px; bottom:60px; right:0; text-align:left;}
ul.newslist li {display: flex; align-items: center; grid-column-gap: 30px; border-bottom:#CCC dashed 1px; padding-bottom:30px; margin-bottom:30px;}
ul.newslist li p { font-size:20px; font-weight:bold; color:#333}
.category-l { background-color:#41629E; padding:5px 10px;  border-radius: 18px; color:#FFF;}
.date-l { font-weight:normal !important; font-size:14px !important;}
.maintitle { width:650px;}
.top-text-004 { color:#21213C; font-size:112px; font-weight:bold;}


@media screen and (max-width: 768px){
/*ニュース＆トピックス*/
#newstopix { position:relative; min-height: inherit;}
.newstopix001 { position: relative; left:0px;}
.newstopix002 { position: relative; width:90%; bottom:0px; right:0; text-align:left; margin-top:30px; margin-left: auto;}
ul.newslist li {display: block; }
ul.newslist li p { font-size:16px; font-weight:bold; }
.category-l {  padding:5px 10px; display:inline-block;}
.date-l { font-weight:normal !important; font-size:14px !important; display:inline-block;}
.maintitle { width:90%;} 
.top-text-004 { font-size:40px; line-height:1.0; padding-right:10px;}
.yokonarabim { margin-right:0px;}
.sp-fle {  display: flex; justify-content: space-around; align-items: center;/*縦*/}
}

		
		.fadein {
  opacity: 0;
  transform: translateY(30px); /* 下から少しスライド */
  transition: all 1s ease-out;
}

.fadein.show {
  opacity: 1;
  transform: translateY(0);
}




.curtain-wrap {  position: relative;  width: 100%;  overflow: hidden;}
.curtain-photo {  width: 100%;  display: block;}
/* カーテン共通 */
.curtain {
  position: absolute;
  top: 0;
  width: 50%;       /* 左右で半分ずつ覆う */
  height: 100%;
  background: #fff; /* 覆う色（好きに変更可） */
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  opacity: 1;
  z-index: 2;
}

/* 左カーテン（右方向に開く） */
.curtain-left {  left: 0;  transform-origin: left;  transform: scaleX(1);}
/* 右カーテン（左方向に開く） */
.curtain-right {  right: 0;  transform-origin: right;  transform: scaleX(1);}
/* アニメーション後 */
.curtain.open {  transform: scaleX(0);  opacity: 1;}


/* 第二階層 */
.hero-title {    font-size: 4rem;    font-weight: 700;    letter-spacing: 4px; background: linear-gradient(135deg, #ffffff 0%, #d4af37 33%);color: transparent;background-clip: text;text-fill-color: transparent; text-align:center;}
.hero-title02 { text-align:left;    font-size: 4rem;    font-weight: 700;    letter-spacing: 4px; background: linear-gradient(135deg, #ffffff 0%, #d4af37 33%);color: transparent;background-clip: text;text-fill-color: transparent;}

.productlist {display: grid ; column-gap: 3.3%; grid-template-columns: 1fr 1fr 1fr; }
.productbox { background-color:#2B2B4D; margin-bottom:60px; border:#454570 solid 1px; border-radius: 8px;}
.productbox02 { background-color:#2B2B4D; margin-bottom:60px; border:#454570 solid 1px; border-radius: 8px;} 
.productbox:hover { border:#d4af37 solid 2px;}
.productbox img { height:auto;}
.productbox h3 { font-size:2.8rem}
.btn-details { width: 150px; font-size:1.1rem; background-color: transparent;    color: #d4af37;    border: 1px solid #d4af37;    padding: 10px 0;    font-weight: 600;    letter-spacing: 2px;    text-transform: uppercxxase;    cursor: pointer;    transition: var(--transition-smooth);    font-family: var(--font-body);    border-radius: var(--radius-sm);    align-self: flex-start; margin-left:auto; margin-right:auto;}
.btn-details a { color:#FFF;	}
.btn-details:hover {
    background-color: var(--color-accent-gold);
    color: var(--color-bg-primary);
}

.second_hum { position:absolute; width:72px; top:20px; right:20px; z-index:9999;}

.second_top { position:relative;}
.second_top_head { width:95%; height:600px;background-size: cover; margin-left:auto;  display: flex; justify-content: center;/*横*/ align-items: center;/*縦*/}
.second_top_head h1 { font-size:36px; letter-spacing:10px; opacity:0.5;}

.itemct { text-align:left; padding-left:20px; font-size:24px; margin-top:100px; margin-bottom:50px;}

  .fade-img {
    transition: opacity 0.2s linear;
  }
  
  .tableadomaru { margin-top:-80px;}
table.t_design_top {  width:900px; margin-left:auto; margin-right:auto; }
table.t_design_top th { background-color:#21213C; color:#FFF; padding:20px;}
table.t_design_top td { text-align: left; padding:20px; background-color: #F6F6F6; color:#444}
  
  @media screen and (max-width: 768px){
	  .productlist {display: grid ; column-gap: 3.3%; grid-template-columns: 1fr; }
	  .second_top_head { width:100%; height:200px;background-size: cover; margin-left: none; margin-top:75px}
.second_top_head h1 { font-size:26px; letter-spacing:10px; opacity:0.5;}
table.t_design_top {  width:100%; }
  }
  
  
  
/* =====================================================
   acoraacoustics
===================================================== */


/* top画像 */
.acoraacoustics_top { position:relative;}
.acoraacoustics_top_head { width:100%;   height: 100vh; min-height: 700px; background-size: cover; margin-left:auto;  display: flex; justify-content: center;/*横*/ align-items: center;/*縦*/}
.acoraacoustics_top_head h1 { font-size:52px; letter-spacing:10px; opacity:0.5; font-family:Cinzel, serif;}
.acoraacoustics_top_head span { font-size: 30px; letter-spacing: 0.3em; }




@media (max-width: 768px) {
.acoraacoustics_top_head { height: 70vh; min-height: 520px;  background-position: center bottom; }
.acoraacoustics_top_head h1 { font-size: 28px; letter-spacing: 0.2em; opacity: 0.65; }
.acoraacoustics_top_head span { font-size: 12px; letter-spacing: 0.3em; }
}


/* タイトル */
.acoraacoustics-title-w { text-align: center; margin-bottom: 56px; }
.acoraacoustics-title-w span { display: block; font-size: 14px; letter-spacing: 0.2em; color: #c2aa78; margin-bottom: 8px; }
.acoraacoustics-title-w h2 { font-size: 34px; font-weight: 500; letter-spacing: 0.06em; color:#FFF; }

.acoraacoustics-title-b { text-align: center; margin-bottom: 56px; }
.acoraacoustics-title-b span { display: block; font-size: 14px; letter-spacing: 0.2em; color: #c2aa78; margin-bottom: 8px; }
.acoraacoustics-title-b h2 { font-size: 34px; font-weight: 500; letter-spacing: 0.06em; color:#333333; }

.title-border-left{ padding: .5em .7em; border-left: 5px solid #d0b925; text-align:left;	font-weight:bold; font-size:20px; }
	
.title-left { font-size: 26px; margin-bottom: 56px; text-align:left; font-weight: 500; letter-spacing: 0.06em; }
.title-left span { display: flex; align-items: center; color: #c2aa78; font-size: 14px;	text-transform: uppercase; margin-bottom: 8px; }
.title-left span::before { content: '';	display: inline-block; margin-right: 20px; width: 40px;	height: 1px; background-color: #c2aa78; }

.title-left-b { font-size: 26px; margin-bottom: 56px; text-align:left; font-weight: 500; letter-spacing: 0.06em; color:#333; }
.title-left-b span { display: flex; align-items: center; color: #c2aa78; font-size: 14px;	text-transform: uppercase; margin-bottom: 8px; }
.title-left-b span::before { content: '';	display: inline-block; margin-right: 20px; width: 40px;	height: 1px; background-color: #c2aa78; }


/* 色 */
.white-a { color:#dcdcdc;}
.black-a { color:#333!important;}
.gold-a { color:#c2aa78;}

/* --- acoraacoustics : CONCEPT --- */

.concept-content p { color: #dcdcdc; margin-bottom: 32px; text-align:center;}

@media (max-width: 768px) {
  .concept-content { width: 100%; padding: 0px 20px; }
  .concept-content p { text-align:left; }
}

/* --- acoraacoustics : CONCEPT short --- */

.message-content p { color: #c2aa78; font-size:20px; text-align:center;}

@media (max-width: 768px) {
  .message-content { width: 100%; padding: 0px 20px; }
  .message-content p { font-size:16px; text-align:center;}
}

/* --- acoraacoustics : Why Stone --- */

.split-section { display: flex; min-height: 100vh;  background-color: #0e1624; /* 深い紺 */}
.split-image { width: 50%; position: sticky; top: 0; height: 100vh; overflow: hidden;}
.split-image img { width: 100%; height: 100%; object-fit: cover;}

.content-inner { max-width: 560px;}
.split-content { width: 50%; padding: 120px 80px; }
.split-content p { color: #dcdcdc; margin-bottom: 32px; animation: fadeIn 0.8s ease both;}

.split-content .gold-quote-row { display: flex; justify-content: flex-end; align-items: flex-start; gap: 24px; padding-top:15px;}
.split-content .gold-quote-line { flex: 1;  max-width: 200px; height: 1px; background-color: rgba(191, 163, 106, 0.7); margin-top: 1.0em; }
.split-content .gold-quote-text { text-align: right; font-size: 16px;  line-height: 2;  color: #c2aa78; font-weight: 600;} 


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}  

@media (max-width: 768px) {
  .split-section { flex-direction: column; }
  .split-image {  position: relative;  width: 100%;  height: 60vh; }
  .split-content { width: 100%; padding: 64px 24px; }

  .split-content .gold-quote-row { align-items: flex-start; gap: 12px; }
  .split-content .gold-quote-line { display: none; }
  .split-content .gold-quote-text { text-align: center; max-width: 100%; line-height: 1.9; }
}


/* --- acoraacoustics : THE CABINET --- */

.cabinet-content p { color: #333; margin-bottom: 32px;}

@media (max-width: 768px) {
  .cabinet-content { width: 100%; padding: 0px 20px; }
  .cabinet-content p { text-align:left; }
}

/* 画像：角丸＋シャドウ */
  .image-shadow img {
            width: 462px; 
            object-fit: contain;
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            /* 画像を左に寄せるためにマージンを調整 */
            margin-left: 0; 
            margin-right: auto;
        }



/* --- acoraacoustics : THE DRIVERS --- */


.drivers-section { padding-top:100px; background-image: linear-gradient(0deg, #1E213D, #000);}
.drivers-content p { color: #dcdcdc; text-align:center; margin-bottom: 32px;}

@media (max-width: 768px) {
  .drivers-content { width: 100%; padding: 0px 20px; }
  .drivers-content p { text-align:left; }
}


/* --- acoraacoustics : THE DRIVERS --- */

.tech-section { background-color: #1E213D; padding: 60px 16px; margin-bottom:100px;}

.tech-card-list { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;}
.tech-card { padding: 32px 28px; background: rgba(255, 255, 255, 0.05);  border-radius: 16px;}

.tech-image { overflow: hidden; margin-bottom: 24px;}
.tech-image img { width: 100%; display: block; transition: transform 0.6s ease;}

/* hover：画像だけ微ズーム */
.tech-card:hover .tech-image img { transform: scale(1.06);}

.tech-card-subtitle { display: block; font-size: 12px; color: #c2aa78; margin-bottom: 6px; text-align: center;}
.tech-card-title { font-size: 18px; font-weight: 500; letter-spacing: 0.08em; color: #ffffff; margin-bottom: 16px; position: relative; text-align: center;}
.tech-card-title::after { content: ""; display: block; width: 28px; height: 1px; background-color: rgba(191, 163, 106, 0.7); margin: 20px auto 0; }

.tech-card-text { font-size: 14px; line-height: 2.0; color: #cfcfcf;}

/* スマホ */
@media (max-width: 768px) {
  .tech-section { padding: 30px 16px; }
  .tech-card-list { grid-template-columns: 1fr; gap: 32px; }
  .tech-card { padding: 28px 20px; }
}



/* --- acoraacoustics : カラー素材 --- */
		
/* 画像：マスク＋文字 */		
.image-mask {
	width:			150px;
	height:			150px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;	/* 相対位置指定 */
}
.image-mask .caption {
	font-size:		100%;
	text-align: 	center;
	padding-top:	50px;
	color:			#fff;
	font-family:Arial, Helvetica, sans-serif;
}
.image-mask .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.image-mask:hover .mask {
	opacity:		1;	/* マスクを表示する */
}

.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}


/* --- acoraacoustics : 技術仕様書 --- */

/* 表 */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.9;
}

.spec-table th,
.spec-table td {
  padding: 22px 18px;
  vertical-align: top;
}

.spec-table th {
  width: 40%;
  white-space: nowrap; 
  color: #8f7a4a;              /* 左ラベル：くすみゴールド */
  font-weight: 400;
  text-align: left;

}

.spec-table td {   width: 60%; white-space: nowrap;  text-align: left; color: #1a1a1a; }
.spec-table td .white {   width: 60%; white-space: nowrap;  text-align: left; color: #fff; }
.spec-table tr { border-bottom: 1px solid rgba(143, 122, 74, 0.55);}
.spec-table tr:last-child { border-bottom: none;}

@media (max-width: 768px) {
  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
  }

  .spec-table th {
    padding-bottom: 5px;
  }

  .spec-table td {
    padding-top: 0;
  }

  .spec-table tr {
    padding: 10px 0;
  }
}


/* --- acoraacoustics : 画像一覧 --- */

.gallery-section { background-color: #21213C; padding: 120px 24px;}

.gallery-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 64px 56px;
  list-style: none;
  padding: 0;
}

.gallery-item {
  position: relative;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

/* hover：静かに浮かせる */
.gallery-item:hover img {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
}


@media (max-width: 768px) {
  .gallery-section {
    padding: 80px 16px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* ===============================
   Silent Gallery
================================ */

.gallery2-section {background-color: #21213C; padding: 120px 24px;}

.gallery2-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 40px;
}

.gallery2-item {
  position: relative;
  overflow: hidden;
  background: #000;
}


.gallery2-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Hover（やりすぎない） */

.gallery2-item:hover img {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.45);
}

@media (max-width: 768px) {
  .gallery2-section {
    padding: 80px 16px;
  }

  .gallery2-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* ===============================
   Heritage Section
================================ */

.heritage-section { background: #f7f6f3; padding: 140px 80px;}
.heritage-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}

.heritage-image img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.15);
}

/* Text */

.heritage-text { position: relative;}

.heritage-body {
  font-size: 15px;
  line-height: 2.1;
  color: #333;
}

/* ===============================
   Responsive
================================ */

@media (max-width: 900px) {
  .heritage-section {
    padding: 80px 24px;
  }

  .heritage-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

}

.ssabume { margin-top:20px; margin-left:20px; display: grid ; column-gap: 3.3%;grid-template-columns: 1fr 1fr 1fr;}
.ssabume li { margin-bottom:10px;}
.ssabume li a { font-size:1.4rem!important;}


.emboss {
  font-size: 30px;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 900;
  color: #e0e0e0;
  text-shadow: 
    -2px -2px 0 #fff,
    2px 2px 4px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
  .emboss {   font-size: 24px;}
}



/* --- audioresearch : 技術仕様書 --- */

/* 表 */
.spec-table2  {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.9;
}

.spec-table2 th,
.spec-table2 td {
  padding: 22px 18px;
  vertical-align: top;
}

.spec-table2 th {
  width: 40%;
  white-space: nowrap; 
  color: #c7bca4; 
  font-weight: 400;
  text-align: left;

}

.spec-table2 td {   width: 60%; white-space: nowrap;  text-align: left; color: #dcdcdc; }
.spec-table2 tr { border-bottom: 1px solid rgba(143, 122, 74, 0.55);}
.spec-table2 tr:last-child { border-bottom: none;}

@media (max-width: 768px) {
  .spec-table2,
  .spec-table2 tbody,
  .spec-table2 tr, {
	display: block;
    width: 100%;
  }

  .spec-table2 th,
  .spec-table2 td {
	display: block;
    width: 100%;
    white-space: normal;


  }

  
  .spec-table2 th {
    padding-bottom: 5px;
  }

  .spec-table2 td {
    padding-top: 0;
  }

  .spec-table2 tr {
    padding: 10px 0;
  }
}