@charset "utf-8";
/*************************************************
 top.css　草津温泉 住応援サイト
**************************************************/




/* ページトップに戻る
.reread_link { width: 120px; height: 120px; position: fixed; bottom: 80px; right: 40px; padding: 0; z-index: 99; overflow: visible;}
.reread_link a { position: relative; display: block; height: 100%; width: 100%; font-size: 1em; text-align: center; text-decoration: none; overflow: visible;}
.reread_link a .reread_link_wrap { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; padding-top: 2em;  background-color: #fff; border: 4px solid #E4E4E4; border-radius: 50%; z-index: 2;}
.reread_link a .reread_link_wrap:before { position: absolute; display: block ; content: ""; top: 16px; left: 0px; right: 0px; height: 21px; background: url(../img/pagetop_arrow.png) center center no-repeat; transition-duration: 0.15s;}
.reread_link a .reread_link_chr { position: absolute; top: -75px; left: 0px; right: 0px; height: 140px; background: url(../img/momichan.png) center top no-repeat; transition-duration: 0.15s; z-index: 1;}
.reread_link a .reread_link_wrap:hover:before,
.reread_link a .reread_link_wrap:focus:before {}
.reread_link a:hover .reread_link_chr,
.reread_link a:focus .reread_link_chr{ top: -125px;}
*/

/* ヘッダー検索 追記　※ レスポンシブ有
.blc_search .search_wrap_inner { position: relative;}
.blc_search .search_wrap_inner:before { position: absolute; display: block; content: ""; top: 0px; bottom: 0px; left: 0px; width: 42px; background: left top no-repeat url("../img/momichan.png"); background-size: 42px auto; transition-duration: 0.15s;}
.blc_search .search_wrap_inner:hover:before { background-position: left top -4px;}
.blc_search input.search_txt { padding-left: 40px; background-image: none;}
 */


/* ================================================== 
 基本スタイル
================================================== */
.top_section { padding: 20px 0;}
.top_section .wrap { max-width: var(--width-contents-def); margin: 0 auto;}
/*
.top_section .wrap_padding { padding-left: var(--space-side-common); padding-right: var(--space-side-common);}
*/

/* 汎用flex */
.flex { display: flex; flex-wrap:wrap; margin: 0; padding-bottom: 0;}
.flex > li { margin: 10px var(--space-side-common); padding-bottom: 0;}

.flex.row_2 > li { width: calc(50% - (var(--space-side-common) * 2));}
.flex.row_3 > li { width: calc(33.3333333333% - (var(--space-side-common) * 2));}
.flex.row_4 > li { width: calc(25% - (var(--space-side-common) * 2));}
.flex.row_5 > li { width: calc(20% - (var(--space-side-common) * 2));}
.flex.row_6 > li { width: calc(16.6666666667% - (var(--space-side-common) * 2));}


/* h2 */
.top_heading { margin: 0; font-size: 1em; font-weight: normal;}
.top_heading span { display: block;}
.top_heading .top_heading_text { font-size: 0.9em;}
.top_heading .top_heading_img { max-width: 100%; height: auto;}

.top_heading_wrap { 
  display: flex; justify-content: center; align-items: center; height: 200px; margin: 0 auto; padding: 0;
  background: center top; background-size: 100vw auto;
}
.top_heading_wrap .top_heading { text-align: center;}


/* more */
.more.arrow { float: right; clear: both;}
.more.arrow a { position: relative; display: block; padding: 0.6em 1em 0.5em 0; border-bottom: 1px solid #000; overflow: hidden; transition-duration: 0.15s;}
.more.arrow a:before { transform: rotate(-45deg); position: absolute; display: block; content: ""; bottom: -7px; right: 3.5px; width: 14px; height: 14px; border-right: 1px solid #000; transition-duration: 0.15s;}
.more.arrow a:hover,
.more.arrow a:focus { background-color: #F2F0EC;}


/*************************************************
 ヘッダー
**************************************************/
.top .header_sec_wrap.top_nav { width: 100%; max-width: var(--width-contents-def); margin: 0 auto; overflow: visible;}

.top .sec_title .header_sec_wrap { position: relative; width: 100%; max-width: inherit; background: center center no-repeat; background-size: cover;}
.top .sec_title .header_sec_wrap .spacer { max-width: 100%; height: auto;}


/* ===========================
 タイトル
=========================== */
.top header .title { position: absolute; display: flex; justify-content: center; align-items: center; top: 0%; bottom: 0%; left: 0%; right: 0%; width: auto; height: auto; background-color: rgba(0,0,0,0.3);}



/* ===========================
 ページコントロール
=========================== */
.page_control { display: flex; justify-content: center; margin: 0 auto; padding: 0;}


/* ===========================
  グローバルメニュー
=========================== */
.menu_global { padding-bottom: 0; overflow: visible; width: 100%;}

.top .header_sec { overflow: visible;}



/* ===========================
  スライダー共通
=========================== */
.slide_box .slide { margin-left: 1.5em; margin-right: 1.5em;}
.slide_box .slide a { display: block; margin: 10px; color: #000; background-color: #fff;box-shadow: 0 3px 6px 0 rgb(189 189 189 / 80%);}
.slide_box .slide a:hover,
.slide_box .slide a:focus { box-shadow: 0 0 6px 4px rgba(255,255,255,1);}
.slide_box .slide a img { margin: 0 auto; width: 100%; }

.slide_box .slide a dl { margin-bottom: 0;}
.slide_box .slide a dl dt { font-size: 1.2em; padding: 0.5em 0.8em;}
.slide_box .slide a dd { font-size: 0.85em; margin-left: 0; padding: 0.5em 1.1em;}
.slide_box .slide a .name_more { display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: 0.8em;}
.slide_box .slide a .name_more .name { font-size: 0.85em; padding-top: 0.2rem;}
.slide_box .slide a .name_more .more { position: relative; display: block; margin-top: 0; padding: 0.6em 1.5em 0.5em 0; border-bottom: 1px solid #aaa; overflow: hidden; }
.slide_box .slide a .name_more .more:after { transform: rotate(-45deg); position: absolute; display: block; content: ""; bottom: -7px; right: 3.5px; width: 14px; height: 14px; border-right: 1px solid #aaa; transition-duration: 0.15s;}


/* works & store */
.works_section .works_tag { float: left; margin: 0.75em 1.1em; padding: 0.1em 0.5em; font-size: 0.85em; background-color: #DFDFDF; border: 3px solid #DFDFDF;border-radius: 3px;}
.works_section .slide_box .slide a dl { clear: both;}

.works_section .slide_box .slide a dl dt,
.store_section .slide_box .slide a dl dt { padding-top: 0; padding-bottom: 0.2em;}
.works_section .slide_box .slide a dl dd,
.store_section .slide_box .slide a dl dd { padding-top: 0;}

.works_section .slide_box .slide a .name_more,
.store_section .slide_box .slide a .name_more { display: block; padding-left: 0.8em; padding-right: 0.8em;}
.works_section .slide_box .slide a .name_more .more,
.store_section .slide_box .slide a .name_more .more{ float: right; margin-bottom: 0;}

.store_section .area { overflow: auto; margin-top: 1em; margin-bottom: 0.5em; padding: 0.3em 2em 0.3em 0;}
.store_section .area_ribbon { position: relative; display: inline-block; padding: 0.3em 2em 0.3em 1em; color: #fff; background-color: #000;}  
.store_section .area_ribbon:after { position: absolute; content: ""; width: 0px; top: 0px; bottom: 0px; right: 0px; border-width: 1em 0.5em 1em 0px; border-color: transparent #fff transparent transparent; border-style: solid;}
.store_section .slide_box .slide a dl dd { display: flex; align-items: flex-start;}
.store_section .store_address { min-width: 2.6em; padding: 0.3em; text-align: center;background-color: #dfdfdf;}
.store_section .store_text { display: block; padding: 0.3em;}


/* insta */
.sec_07 .slide_box .slide a img{max-height: 100%;}

/* ===========================
  コンテンツ
=========================== */
/* sec_01 ======== */
.sec_01 { position: relative; min-height: 750px; padding: 0; background-color: #F2F0EC;}
.sec_01 .wrap { position: relative; padding-bottom: 0; z-index: 2;}

.living { margin-left: calc(100% - (116px * 6)); padding-bottom: 0;}
.living h2 { margin-bottom: 2.5rem; padding-bottom: 0;}

.living_inner { padding: 4rem 0 2rem 60px;}
.living_inner img { max-width: 100%; height: auto;}
.living_inner ul { display: flex; justify-content: center; align-items: stretch; margin-bottom: 0;}
.living_inner li { width: calc(50% - 20px); margin: 5px 10px; padding: 0; text-align: center;}
.living_inner .wide_banner { display: block;}
.living_inner .wide_banner li { width: calc(100% - 20px);}

.living_contents { display: flex; justify-content: space-between; align-items: center; margin: 1.5rem 0;}
.living_text { padding-top: 1em; font-size: 1.1em;}

.piccase_wrap { position: absolute; top: 0%; bottom: 0%; left: 0%; width: calc(50% - (1160px / 10)); padding-bottom: 0; z-index: 1;}

.piccase { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; height: 100%; padding-bottom: 0;}
.piccase .size_1 { width: calc(100% / 3);}
.piccase .size_2 { width: calc((100% / 3) * 2);}
.piccase .size_3 { width: 100%;}

.piccase .case { padding-bottom: 0; background: center center no-repeat; background-size: 100% auto; background-color: #000; color: #fff;}
.piccase .case img { width: 100%; height: 250px; object-fit: cover; }

.piccase .case01 { background-image: url("../img/top_living_bg01.png");}
.piccase .case02 { background-image: url("../img/top_living_bg02.png");}
.piccase .case03 { background-image: url("../img/top_living_bg03.png");}
.piccase .case04 { background-image: url("../img/top_living_bg04.png");}
.piccase .case05 { background-image: url("../img/top_living_bg05.png");}
.piccase .case06 { background-image: url("../img/top_living_bg06.png");}


@media all and (-ms-high-contrast: none) {
  /* ieだけ */
  .piccase .case img { display: none;}
  .piccase .size_1 { width: calc((100% / 3) - 1px);}
  .piccase .size_2 { width: calc(((100% / 3) - 1px) * 2 );}
  .piccase .size_3 { width: calc(100% - 3px);}
}



/* sec_02 ======== */
.sec_02 { padding: 4rem 0 3rem; background-color: #fff;}
.sec_02 .wrap {}

.topics { display: flex; align-items: flex-start; margin-bottom: 1em;}
.topics .topics_heading { width: 13em;}
.topics .news { width: calc(100% - 13em);}


/* news */
.news {}
.news dl { padding: 1.5em 0; border-bottom: 1px solid #aaa;}
.news dl:first-child { border-top: 1px solid #aaa;}
.news dt { display: flex; align-items: flex-start; color: #333; font-weight: 100;}
.news dt .news_date { min-width: 12em;}
.news dd { margin-left: 0;}



/* sec_03 ======== */
.sec_03 { margin-top: 0; padding: 0;}
.sec_03 .wrap { padding-bottom: 0;}
.sec_03 .top_heading_wrap { margin-bottom: 5rem;}
.sec_03 h2 { color: #fff;}

.sec_03 .top_heading_wrap { background-image: url("../img/top_voice_bg.png");}

.voice_section .more.arrow,
.works_section .more.arrow,
.store_section .more.arrow{
    background-color: rgba(255,255,255,0.75);
	border: 1px solid #333;
    padding: 6px 20px 10px;
    width: 250px;
    margin: 0 auto;
    float: none;
}
.works_section .more.arrow:hover,
.store_section .more.arrow:hover{
    background-color: rgba(255,255,255,1);
}

.voice_section .more.arrow:hover{
    background-color: rgba(242,240,236,1);
}

.voice_section .more.arrow a:hover,
.works_section .more.arrow a:hover,
.store_section .more.arrow a:hover{
    background-color: initial;
}

/* sec_04 ======== */
.sec_04 { position: relative; padding: 6rem 0; background: center top url("../img/top_movie_bg.png"); background-size: 100vw auto;}
.sec_04 .wrap { padding-bottom: 0; overflow: visible;}

.movie { display: flex; justify-content: space-between; overflow: visible;}

.movie_tube { position: relative; width: 480px; padding-bottom: 0; border: 4px solid #fff; overflow: visible;} /* 動画の幅をここで指定する */
.movie_tube:before { position: absolute; display: block; content: ""; top: 3rem; bottom: -2.5rem; right: -3rem; left: -50vw; background-color: rgba(255,255,255,0.6);}
.movie_tube_wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.movie_tube_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


.move_contents { width: calc(100% - 480px - 2rem); padding-left: 15rem;}
.move_contents h2 { margin-bottom: 3rem;}
.move_contents .more.arrow { float: left; padding: 10px;}
.move_contents .more.arrow a { box-shadow: 0 0 0 10px rgba(255,255,255,0.7); background-color: rgba(255,255,255,0.7);}
.move_contents .more.arrow a:hover,
.move_contents .more.arrow a:focus { color: #fff; border-color: #fff; box-shadow: 0 0 0 10px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.7);}
.move_contents .more.arrow a:hover:before,
.move_contents .more.arrow a:focus:before { border-color: #fff;}


/* sec_05 ======== */
.sec_05 { padding: 0; background: center top url("../img/top_works_bg.png"); background-size: 100vw 100%;}
.sec_05 .wrap { padding-bottom: 0;}
.sec_05 h2 { color: #fff;}




/* sec_06 ======== */
.sec_06 { padding: 0; background: center top url("../img/top_store_bg.png"); background-size: 100vw 100%;}
.sec_06 .wrap { padding-bottom: 0;}



/* sec_07 ======== */
.sec_07 { padding-top: 4rem; background-color: #fff;}
.sec_07 .wrap { width: 100%; max-width: inherit; padding-bottom: 0;}
.sec_07 h2 { margin: 0 2.5% 2rem; text-align: center;}
.autoplay.autoplay_insta .slide_wrap { margin-left: 0; margin-right: 0;}

.autoplay_insta .buttons { justify-content: center;}
.slide_box.autoplay_insta .slide { display: flex; justify-content: center;}
.slide_box.autoplay_insta .slide a { background: none;}


/* 文字リンク　色を変えない */
.news dd a,
.more.arrow a,
.slide_box .slide a
{ color: /* var(--color-txt-def); */ #000; text-decoration: none;}

.news dd a:hover,
.news dd a:focus
{ text-decoration: underline;}




/* タブメニュー */
.tabmenu { padding-bottom: 0;}
.tabmenu .menu { display: flex; justify-content: space-between; margin: 0; padding: 0;}
.tabmenu .menu li { width: 33.3333333333%;}
.tabmenu .menu a { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0.5em; text-decoration: none; color: #000; text-align: center; background-color: #DEE7F1; transition-duration: 0.15s;}
.tabmenu .menu li.active a{ color: #fff; background-color: #296ACC;}
.tabmenu .menu a:hover,
.tabmenu .menu a:focus { color: #fff; background-color: #296ACC;}
.tabmenu .section { padding: 0;}
.tabmenu .section h2 { display: none;}
.tabmenu .division { padding: 10px; border: 10px solid #296ACC; border-radius: 0 0 0.4em 0.4em;}
.tabmenu .news { margin-bottom: 10px;}
.tabmenu ul.more li { width: calc(100% - 1em); margin-bottom: 0;}
.tabmenu ul.more a { width: 100%; font-size: 1.2em;}




/*************************************************
 レスポンシブ　タブレット 1600px
**************************************************/
@media screen and (max-width: 1600px) {  
  .sec_05,
  .sec_06
  { background-size: auto 100%;}  
}

/*************************************************
 レスポンシブ　タブレット 1320px
**************************************************/
@media screen and (max-width: 1320px) {  
  .sec_04
  { background-size: auto 100%;}  
}



/*************************************************
 レスポンシブ　タブレット 1160px + 20px
**************************************************/
@media all and (-ms-high-contrast: none) and (max-width: 1180px) {
  /* ieだけ */
  .piccase_wrap { height: 750px;}
}

@media screen and (max-width: 1180px) {

  .top .header_wrap
  { margin-left: 0; margin-right: 0;}
  
  .top_section .wrap
  { margin-left: 2.5%; margin-right: 2.5%;}
  
  .sec_03 .top_heading_wrap
  { background-size: auto 100%;}
  
  .top header .title img { width: 240px;}
  
  
  /* ヘッダー検索 追記　※ レスポンシブ有 
  .blc_search .search_wrap_inner:before { background-position: left top 12px;}
  .blc_search .search_wrap_inner:hover:before { background-position: left top -5px;}
*/
  
  
  /* sec_01 ======== */
  .living,
  .piccase_wrap { width: 100%;}
  
  .living h2,
  .living_contents,
  .living_inner ul { max-width: 800px; margin-left: auto; margin-right: auto;}
  
  .living { margin-left: 0;}
  .piccase_wrap { position: relative;}
  
  
  .living_inner { padding-top: 4rem; padding-left: 0;}
  .living_contents { margin-bottom: 0.5em;}
  .living_map { padding-left: 0.5em;}
  

  /* sec_02 ======== */
  .sec_02 { padding-top: 3rem;}
  .topics { display: block;}
  .topics .topics_heading,
  .topics .news { width: 100%;}
  
  .topics .topics_heading .top_heading { margin-bottom: 2em; text-align: center;}
  
  
  /* sec_04 ======== */
  .sec_04 { position: relative; padding-top: 10rem; padding-bottom: 1rem;}
  
  .movie { display: block;}
  .movie_tube:before { display: none;}
  .movie_tube { margin: 0 auto;}
  
  .move_contents { width: 100%; padding: 0;}
  .move_contents h2 { position: absolute; top: 3rem; left: 2.5%; right: 2.5%; margin-bottom: 0; text-align: center;}
  .move_contents .more.arrow { float: none; display: flex; justify-content: center; padding: 3rem 0;}
  

  /* sec_07 ======== */
  .sec_07 {}
  .sec_07 .wrap { margin: 0;}

  
  
}


/*************************************************
 レスポンシブ 600px + 20px
**************************************************/
@media all and (-ms-high-contrast: none) and (max-width: 620px) {
  /* ieだけ */
  .piccase_wrap { height: 480px;}
}


@media screen and (max-width: 620px) {
  
  .top .sec_title .header_sec_wrap { height: 320px; background-size: auto 100%;}
  .top .sec_title .header_sec_wrap .spacer { display: none;}
  .top header .title img { width: 180px;}
  
  .top_heading_wrap { height: 150px;}
  
  .voice_section .more.arrow a,
  .works_section .more.arrow a,
  .store_section .more.arrow a{ padding-right: 3em; white-space: nowrap;}  

  /* ===========================
  スライダー共通
  =========================== */
  .slide_box .slide { margin-left: 0.5em; margin-right: 0.5em;}
  
  
  /* store */
  .store_section .slide_box .slide a dl dd { display: block;}
  
  .voice_section .more.arrow,
  .works_section .more.arrow,
  .store_section .more.arrow{
    margin: 10px auto;
  }
  
  /* sec_01 ======== */
  .living_contents { display: block;}
  
  .living h2,
  .living_contents { max-width: 90%;}
  .living_map { text-align: center;}
  
  .piccase .case img { height: 160px;}
  
  /* sec_04 ======== */
  .movie_tube { position: relative; width: 90%;} /* 動画の幅をここで指定する */


}