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

html {font-size: 62.5%; scroll-behavior: smooth; }
* {box-sizing: border-box; }
body { color: #333; background-size: cover; font-size: 1.4rem; font-family: 'Shippori Mincho', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, serif; padding: 0; margin: 0; line-height: 2.1rem; overflow: hidden; /*スプラッシュスクリーン用*/}
img {width:100%; }
a {text-decoration: none; color:#333; font-size:1.6rem;}
p{ font-size:1.7rem; line-height:2.6rem; font-family:"Shippori Mincho", serif; font-weight:400; font-style:normal;}
.sp {display: none;}
@media only screen and (max-width: 480px) {
.sp { display: block; }
.pc { display: none; }
}

/* --- スプラッシュスクリーン（ロゴ表示部分）のスタイル --- */
.splash_screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001; /* スプラッシュスクリーンは最も前面に (ロゴより高い) */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}
.splash_screen.fade_out {
    opacity: 0;
    visibility: hidden;
}
.splash_logo {
    max-width: 300px;
    height: auto;
    animation: fadeInScaleUp 1s ease-out forwards;
}
@keyframes fadeInScaleUp {
    0% {transform: scale(0.9); opacity: 0;}
    100% {transform: scale(1); opacity: 1;}
}

/* --- 固定ロゴ(左上ロゴ)のスタイル --- */
.fixed-header {position: fixed; top: 20px; left: 40px; width: 180px; height: 40px; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 1.5s ease-out; }
.fixed-header .logo{ margin: 0; width: 100%; height: 100%; }
.fixed-header .logo img{ display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- 固定枠のスタイル --- */
.fixed-border { position: fixed; z-index: 9998; pointer-events: none; scrollbar-width: none;/* Firefox */ }
.fixed-border::-webkit-scrollbar { display: none; }/* Webkit系ブラウザ */
.fixed-border-top { top: 40px; left: 240px; right: 40px; height: 0; border-top: 2px dotted #ddd; }
.fixed-border-bottom { bottom: 40px; left: 40px; right: 40px; height: 0; border-bottom: 2px dotted #ddd; }
.fixed-border-left { top: calc(30px + 40px + 2px); bottom: 40px; left: 40px; width: 0; border-left: 2px dotted #ddd; }
.fixed-border-right { top: 40px; bottom: 40px; right: 40px; width: 0; border-right: 2px dotted #ddd; }

/* --- 共通 --- */
.section {
	opacity: 0; visibility: hidden; transition: opacity 1.2s ease-in, visibility 1.2s ease-in; box-sizing: border-box;
    padding-top: calc(40px + 2px + 20px + 40px);
    padding-bottom: calc(40px + 2px);
    padding-left: calc(40px + 2px);
    padding-right: calc(40px + 2px);  
}
.section.active{opacity: 1; visibility: visible;}
.container{max-width: 960px; margin: 0 auto; line-height: 1.8;}
h2{font-size:2.4em; color:#231815; margin-bottom:30px; font-family:"Cormorant Garamond",serif; font-optical-sizing:auto; font-weight:400; font-style:italic; letter-spacing:2px;}

/*各sectionのbg_style*/
.bg_style01{background:#f3f4f2; background:linear-gradient(to right, rgba(243,244,242,0.5), rgba(255,255,255,0));}
.bg_style02{background:#ffffff;}
.bg_style03 {
  width: 100%; height: 200px;
  background:#f9f9f9; 
  background-size: 50% 100%; 
  background-position: right top, left top; 
  background-repeat: no-repeat; 
}


/* --- .hero_section --- */
.hero_section{position:relative; width:100%; height:60vh; display:flex; justify-content:center; align-items:center; color:white; text-shadow:2px 2px 4px rgba(0,0,0,0.5); overflow:hidden;}
.main_v{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-1;}
.catch{position:absolute; top:10vh; right:20vw; width:5%; max-width:30px; min-width:21px; height:auto;}
.catch img{width:100%; height:100%;}



/* --- .section_about --- */
.section_about{position:relative; overflow:hidden; width:100%; height:60vh; display:flex; justify-content:center; align-items:center;}
.section_about .img_area {
    position: absolute; top: 10%; right: 0; width: 55%; height: 15%; overflow: hidden;
    background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url(../images/logo.svg) no-repeat;
    background-position: 80px center;
    background-size: 80%;
    background-color: #e9e8e8;
}
.section_about .img_area img{width:30%; max-width:200px; height:100%; position:absolute; bottom:-22px; left:80px;}
.section_about .text_area{margin:0 20px 0; position: relative;  z-index: 2;}
.section_about h2{text-align: left; margin-bottom: 30px; font-size: 2.4em; color: #231815; font-family: "Cormorant Garamond", serif; font-weight: 400; font-style: italic; letter-spacing: 2px;}
.section_about p{line-height:4rem; margin-bottom:40px;}

/*section_aboutアニメーション*/
.section_about h2 {
    opacity: 0; transform: translateY(20px);  /* 初期状態：透明で少し下にずらす */
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;	/* 透明度と位置の変化のアニメーション */
}
.section_about p {
    opacity: 0; transform: translateY(30px); /* 初期状態：透明で少し下にずらす */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;/* 透明度と位置の変化のアニメーション */
}
.section_about.active h2,
.section_about.active p {opacity:1; transform: translateY(0); /* 元の位置に戻す */}

/* p段落のアニメーションに遅延を設けて順番に表示 */
.section_about.active p:nth-of-type(1){transition-delay: 0.4s;}
.section_about.active p:nth-of-type(2){transition-delay: 0.8s;}
.section_about.active p:nth-of-type(3){transition-delay: 1.2s;}

.section_about .img_area {  
    opacity: 0; transform: translateX(50px);/*初期状態を設定：透明で少し右にずらす */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;/* 透明度と位置の変化のアニメーション*/
}
.section_about.active .img_area {
    opacity: 1; transform: translateX(0); /* 不透明にして元の位置に戻す */
    transition-delay: 0.4s; /* 画像エリアは少し遅れて開始 */
}



/* --- .section_lineup --- */
.section_lineup{padding-left:0; padding-right:0; position:relative; overflow:hidden; width:100%; height:60vh; display:flex; justify-content:center; align-items:center;}
.container_lineup{display:flex; flex-wrap: wrap; align-items: center;/*	max-width:960px;*/width: 100%;}
.container_lineup .img_area{width:100%;}
.section_lineup h2 {text-align:center; margin:0 auto 60px;}

/*section_lineupスライド*/
.slider_lineup {padding:0;}
.slider_lineup img{width: 100%;}
.slider_lineup div{margin: 0 5px;}
.slider_lineup .slick-next{right: 17px;　z-index: 100;}
.slider_lineup .slick-prev{left: 23px; z-index: 100;}
.arrow_box {display:flex; align-items:center; justify-content:center; margin:20px auto 0; position:relative;}
.prev-arrow, .next-arrow{display: block; width: 50px; height: 50px; cursor: pointer; position: relative;}
.prev-arrow {transform: rotate(180deg); margin-right: 20px; }
.prev-arrow::before,
 .next-arrow::before{position: absolute; content: ""; width: 15px; height: 15px; border-right: 2px solid #ddd; border-top: 2px solid #ddd; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transform: rotate(45deg); }
 
/*section_lineup h2アニメーション*/
.section_lineup h2 {
    opacity: 0; transform: translateY(20px);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}
.section_lineup.active h2 {
    opacity: 1; transform: translateY(0);
    transition-delay: 0.4s;
}




/* --- .section_featured --- */
.section_featured { width: 100%; height: 70vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; overflow: hidden; }
.section_featured .container { display: flex; flex-wrap: wrap; align-items: center; max-width: 960px; width: 100%; padding: 0 32px; }
.section_featured .img_area { width: 35%; flex-basis: 35%; flex-shrink: 1; min-width: 100px; }
.section_featured .text_area { width: 65%; flex-basis: 65%; flex-grow: 1; flex-shrink: 1; text-align: left; padding: 0 0 80px 0; }
.section_featured .text_area p {line-height: 4rem;}

/*section_featured アニメーション*/
.section_featured .text_area h2 {  
    opacity: 0; transform: translateY(20px); /* 初期状態：透明で少し下にずらす */
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}
.section_featured.active .text_area h2 {
    opacity: 1; transform: translateY(0);
    transition-delay: 0.8s;
}
.section_featured .text_area p {
    opacity: 0; transform: translateY(20px);/* 初期状態：透明で少し下にずらす */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
.section_featured.active .text_area p {
    opacity: 1; transform: translateY(0);
    transition-delay: 1.2s;
}



/* --- .section_news --- */
.section_news h2{text-align:center;}
.section_news { width: 100%; height: 70vh; display: flex; align-items: center; overflow: hidden; }
.section_news .date{width:calc(10% + 20px); margin-right:40px; text-align:right;}
.section_news .title{width:80%;}
.news_more{text-align:right; margin-right:20px;}
.news_more a{font-size:1.8em; font-family:"Cormorant Garamond", serif; font-optical-sizing:auto; font-weight:400; font-style:italic; letter-spacing:2px; text-decoration: underline; text-decoration:underline #ddd dotted 2px; text-underline-offset:5px;}
.section_news li{margin-bottom:40px;}

/*section_news hover下線アニメーション*/
.section_news li a {
  display:flex;
  justify-content:center;
  color: #333; 
  text-decoration: none; 
  position: relative; /* 疑似要素の基準点 */
}
/* 疑似要素（下線）のスタイル */
.section_news li a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0; /* 初期は幅0 */
  height: 0;
  border-bottom: 2px dotted #ddd; 
  transform: translateX(-50%);
  transition: width 0.3s ease-out; 
}

/* ホバー時の疑似要素（下線）のスタイル */
.section_news li a:hover::after {
  width: 100%; /* ホバー時に幅を広げる */
  transition: width 1.5s ease-out; 
}

/* グラデーションテキストhoverクラス */
.text_gradient_on_hover {color:#231815;}
.text_gradient_on_hover:hover {
　-webkit-text-fill-color: transparent;  /*Safari対応 */
  color: transparent; 
  background: linear-gradient(to right, #4169E1, #5F9EA0); 
  -webkit-background-clip: text; /* Chrome, Safari対応 */
  background-clip: text; 
}
.section_news li a,
.news_more a {transition: color 0.3s ease;}




/* --- .section_contact --- */
.section_contact h2{text-align:center;}
.section_contact p{text-align:center; line-height:4rem;}
.section_contact{width: 100%; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.section_contact .container{text-align:center; width:100%;}

/* 「お問い合わせフォーム」リンクのスタイル */
.button {
    display: inline-block;
    padding: 12px 25px;
    margin: 20px auto;
    font-size: 1.6rem;
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.5s ease; 
    color: #fff;
    background-color: #231815;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}
.button:hover {
    background: linear-gradient(to top right, #4169E1, #5F9EA0);
    color: #fff; 
    transform: translateY(1px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
}

.info_logo{width:50%; max-width:200px; margin:60px auto 0;}

/*footer*/
footer{position:absolute; bottom:0; left:0; width:100%; margin:0 auto;}
footer p{font-size:1.2rem;}


@media only screen and (max-width: 768px) {
h2,
.section_about h2{font-size: 1.8em;}
p{font-size: 1.3rem; line-height: 1.8rem;}

/* --- 固定枠のスタイル --- */
.fixed-border-top{top:20px ;left:160px ;right:20px;}
.fixed-border-bottom{bottom:20px; left:20px; right:20px;}
.fixed-border-left{top:calc(10px + 30px + 2px); left:20px;bottom:20px;}
.fixed-border-right{top:20px; right:20px; bottom:20px;}

/* 固定ヘッダー（ロゴ） */
.fixed-header{top:10px; left:20px; width:120px; height:30px;}
.section {
	padding-top: calc(20px + 2px); 
	padding-bottom: calc(20px + 2px); 
	padding-left: calc(20px + 2px); 
	padding-right: calc(20px + 2px); 
}

/* --- .section_about --- */
.section_about .img_area {top:40px; width:60%; height:10%; background-position:20px center; opacity:0; transform:translateX(30px);}
.section_about.active .img_area{opacity:1; transform:translateX(0);}
.section_about .img_area img {left:20px; bottom:-8px;}
.section_about .text_area {margin:0 10px 0;}

/* --- .section_featured --- */
.section_featured .img_area{width:60%; max-width:330px; margin:0 auto;}
.section_featured .text_area {width:100%; max-width:500px; margin:0;}

/* --- .section_news --- */
.news_area{margin:0 20px;}
.section_news .date{width:calc(100% + 20px); text-align:left;}
.section_news .title{width:100%; line-height: 2.4rem;}
.section_news li a {display:inherit;}
.news_more a{font-size:1.6rem;}

/* --- .section_contact --- */
.button{padding: 10px 20px; font-size: 1.4rem; }
/*footer*/
footer p{font-size:1.0rem; margin-bottom:-10px;}

}
@media only screen and (max-width: 480px) {
h2{margin-bottom:0;}
.container{margin:0 10px;}

/* --- .section_about --- */
.section_about h2{margin-bottom:0;}
.section_about p{margin-bottom:5%; line-height:2.4rem;}
.section_featured .container{display:block; padding:20px 20px 0;}

/* --- .section_lineup --- */
.section_lineup{padding-left: 0; padding-right:0;}
.section_lineup h2{margin-bottom:20px;}
.section_lineup .slider_lineup div { margin:0;}
.section_lineup .img_area{height:7%; background-position:30px center;}
.section_lineup .img_area img{left: 30px;}
.container_lineup{padding:20% 0 0;}

/* --- .section_featured --- */
.section_featured .text_area p{line-height:3rem;}

/* --- .section_contact --- */
.section_contact h2{margin-bottom:5%}
.section_contact .container p{/*text-align:left; */line-height:2rem; margin:8px auto; width:calc(100% + -20px); max-width:320px;}
.button{margin:20px 0 0;}
.info{margin:0 10px;}
.info_logo{margin:50px auto 0;}
/*footer*/
footer p{text-align:center; margin-bottom:-10px; }

}
@media only screen and (max-width: 320px) {
/* --- .section_about --- */
.section_about p{font-size:1.2rem; line-height:2.1rem;}
.section_about .img_area {top:0px;}
}