@charset "UTF-8";

/*共通
---------------------------------------------------------------------------*/
:root {
	--themecolor: #235b9e;
	--maincolor: #111111;
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
float: none;
width:100%;
text-align: left;
overflow: hidden
}
/* 全体 750px*/
.con75 {
box-sizing:border-box;
width:100%;
}
@media screen and (min-width: 1023px) {
.con75{
width:750px;
margin: 0 auto;
}}

/*スライド
---------------------------------------------------------------------------*/
.rslides_box{
position:relative;
display:flex;
height:100vh;
overflow:hidden;
}

/* 左テキスト */
.catch_text{
width:40%;
display:flex;
flex-direction:column;
justify-content:center;
padding-left:10%;
z-index:2;
}
.catch_text h2{
font-size:clamp(34px, 4vw, 56px); 
font-weight:400;
line-height:1.4;
letter-spacing:.1em;
margin:0 0 20px;
color:#2b1c1c;
}
.catch_text h2{
opacity:0;
transform:translateY(30px);
animation:copyFade 1s ease forwards;
}
.catch_text p{
font-size:clamp(8px, 1.2vw, 13px);
line-height:1.8;
letter-spacing:.08em;
margin:0;
}
/* catch_text h2のアニメ */
@keyframes copyFade{
to{
opacity:1;
transform:translateY(0);
}
}
/* 右画像 */
.slide_bg{
width:60%;
background-size:cover;
background-position:center;
}

/* ULリセット */
.slide_bg ul,
.slide_bg li{
height:100%;
margin:0;
padding:0;
list-style:none;
}
/* 画像 */
.slide_bg img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
@media screen and (max-width:1024px){
.rslides_box{
height:600px;
}
.catch_text h2{
font-size:clamp(26px, 5vw, 42px);
}
.catch_text p{
font-size:10px;
}
.slide_bg{
position:absolute;
right:0;
top:0;
width:60%;
height:100%;
}
/* テキストを重ねる */
.catch_text{
position:absolute;
bottom:30%;
left:0;
width:100%;
z-index:2;
padding-left:5%;
}
}
@media screen and (max-width:767px){
.rslides_box{
height:500px;
position:relative;
}
.slide_bg{
width:70%;
}
.catch_text h2{
font-size:34px;
line-height:1.5;
}

.catch_text p{
font-size:8px;
line-height:1.9;
}
}

/* ランダム表示用 */
#randomSlide{
height:100%;
}
#randomSlide li{
display:none;
height:100%;
}
#randomSlide li.active{
display:block;
}
/* 画像安定表示 */
#randomSlide img{
width:100%;
height:100%;
object-fit:cover;
}
/* アニメ */
#randomSlide li.active{
display:block;
animation:fade 1.5s ease;
}
@keyframes fade{
from{opacity:0;}
to{opacity:1;}
}

/*スクロールダウン
---------------------------------------------------------------------------*/
.scrolldown{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
z-index:10;
}

.scrolldown a{
text-decoration:none;
display:block;
}

.scrolldown span{
position:relative;
display:block;
color:#fff;
font-size:12px;
letter-spacing:.2em;
text-align:center;
}

.scrolldown span::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
top:20px;
width:1px;
height:50px;
background:#fff;
animation:scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine{
0%{transform:translate(-50%,0);opacity:0;}
30%{opacity:1;}
100%{transform:translate(-50%,20px);opacity:0;}
}

/*背景
---------------------------------------------------------------------------*/
#bg_fff_1,
#bg_fff_2{
margin: 90px 0
}
@media screen and (max-width:767px){
#bg_fff_2{
margin: 50px 0 90px 0
}
}


/*全体見出し
---------------------------------------------------------------------------*/
.section-center-h3,
.section-side-h3{
font-size: 23px;
line-height: 1.5;
font-weight: 500;
letter-spacing:.05em;
margin: 0 0 20px 0;
color: var(--maincolor);
}
.section-center-h3{
text-align:center;
}
.section-side-h3{
text-align:left;
}
@media screen and (min-width: 1024px) {
.section-center-h3,
.section-side-h3{
font-size: 28px;
margin: 0 0 30px 0;
}}



/*メッセージ
---------------------------------------------------------------------------*/
.concept_area{
position:relative;
padding:90px 0;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
/* 縦書き */
writing-mode:vertical-rl;
text-orientation:upright;
/* 全体中央 */
margin:0 auto;
}
/* ======================
 中央テキスト
====================== */
.concept_inner{
max-width:750px;
margin:0 auto;
position:relative;
z-index:10;
text-align:center;
}
/* タイトル */
.concept_inner h2{
font-size:34px;
line-height:2.1;
letter-spacing:.12em;
margin:0 0 0 60px;
}
/* 本文 */
.concept_text{
font-size:18px;
line-height:3;
letter-spacing:.08em;
}

@media screen and (max-width:767px){
.concept_area{
writing-mode:horizontal-tb; /* 横書きに戻す */
text-orientation:mixed;
padding:50px 0;
align-items:flex-start;
}
.concept_inner{
max-width:100%;
text-align:left;
}
.concept_inner h2{
font-size:24px;
line-height:1.6;
margin:0 0 20px 0;
text-align:left;
letter-spacing:0;
}
.concept_text{
font-size:16px;
line-height:2;
}
.concept_text br,
.concept_inner h2 br{
display:none;
}
}

/*富山の日本酒マップ　バナー
---------------------------------------------------------------------------*/
.button-map {
display: flex;
justify-content: center;
align-items: center;
width: 750px;
margin: 0 auto;
padding: 1.5em 0;
border: 1px solid var(--maincolor);
color: var(--maincolor);
background-color: transparent;
transition: all .35s ease;
font-size: 20px;
}
.button-map:hover {
background-color: var(--maincolor);
color: #fff;
border-color: var(--maincolor);
}
@media screen and (max-width:1023px){
.button-map {
width: 100%;
font-size: 18px;
}
}



/*イメージ
---------------------------------------------------------------------------*/
.parallax_area{
position:relative;
height:600px;
overflow:hidden;
/* 背景 */
background:
linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
url("../img/top/bg_img.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
/* 右余白 */
width:calc(100% - 10%);
margin-right:auto;
display:flex;
align-items:flex-end;
}
/* ======================
 テキスト
====================== */
.parallax_inner{
color:#fff;
padding:0 0 60px 0;
width:100%;
}
.parallax_inner h2{
font-size:clamp(24px, 3vw, 32px);
font-weight:400;
line-height:1.6;
margin:0 0 20px;
color:#fff;
}
@media screen and (max-width: 1023px) {
.parallax_area{
width:calc(100% - 60px);
}
}
@media (max-width:767px){
.parallax_area{
width:100%;

background:
    linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
    url("../img/top/bg_img_sp.jpg");
background-size:cover;
background-position:center;
background-attachment:scroll;
}
.parallax_area p br {
display: none;
}
.parallax_inner{
padding:60px 0;
}
}


/*メニューバナー　4等分→2
---------------------------------------------------------------------------*/
.menu_wrap{
display:flex;
justify-content:space-between;
gap:60px;
}
/* 各アイテム */
.menu_item{
width:25%;
text-align:center;
text-decoration:none;
}
/* テキスト */
.menu_item p{
margin-bottom:20px;
font-size:clamp(16px, 3vw, 20px);
text-align: center
}
/* 丸バナー */
.circle{
width:100%;
aspect-ratio:1/1;
border-radius:50%;
box-shadow:0 10px 20px rgba(0,0,0,.15);
transition:.4s ease;
}
.circle img{
padding: 30%
}

/* hover */
.menu_item:hover .circle{
transform:translateY(-8px);
box-shadow:0 20px 30px rgba(0,0,0,.2);
}

@media screen and (min-width: 1500px) {
.menu_wrap{
width: 1200px;
margin: 0 auto
}
} 
@media screen and (max-width: 1023px) {
.menu_wrap{
gap:60px;
flex-wrap:wrap;
padding: 0 10%
}
.menu_item{
width:calc(50% - 30px);
}
}
@media (max-width:767px){
.menu_wrap{
column-gap:20px; /* 横の間 */
row-gap:50px;
padding: 0
}
.menu_item{
width:calc(50% - 20px);
}
}


/*横スライド
---------------------------------------------------------------------------*/
.yoko_slider {
  padding: 0 0 50px 0;
}
.yoko_slider .slick-slide {
  margin-right: 16px;
}
.yoko_slider .slick-slide img {
  width: 100%;
  height:250px;
  object-fit: cover;
	display:block;
}
@media screen and (min-width: 1024px) {
.yoko_slider {
  padding: 0 0 90px 0;
}
.yoko_slider .slick-slide img {
height:350px;
}
}



@media screen and (min-width: 768px) {

} 
@media screen and (min-width: 1024px) {

}
@media screen and (min-width: 1200px) {

}