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

/***　全ページ　***/

:root{
	--wh:#e8ecef;
	--bro:#8d6449;
	--nezu:#e8ecef;
	--black1:#343434;
	--black2:#000000;
}

.pd_4vw{
	padding-right: 4vw;
}

.cate_list a{
	background-color: #998675;
    padding: 10px 15px;
    color: white;
}

.bord{
	    border-left: 1px #959595 solid;
}

.bord_r{
	    border-right: 1px #959595 solid;
}

.bord2{
	    border-left: 1px #959595 solid;
}

.load img{
	max-width: 100px;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.wrap{
	min-width: 1280px;
	overflow: hidden;
}

.ani{
	    transform: skew(10deg, 50deg) translateY(50px);
    transform-origin: left top;
	opacity: 0;
	    transition: transform 1.2s, opacity 1.4s;
}

.ani.fadetrans{
     opacity: 1;
     transform: none;
	    transition: transform 1.2s, opacity 1.4s;
}


.txt_color1, .hvr_txt_color1:hover {
    color: var(--bro);
}

.border_color2, .hvr_border_color2:hover {
    border-color: var(--nezu);
}

.mg_t-150px{margin-top: 150px;} 


.page_title{
	background-color: var(--nezu);
	padding: 10px;
	box-sizing: border-box;
}

.bg_color1, .hvr_bg_color1:hover {
    background-color: #343434;
}

.txt_color3, .hvr_txt_color3:hover {
    color: var(--bro);
}

.bg_color3, .hvr_bg_color3:hover {
    background-color: var(--bro);
}

.width_1080-max{
	max-width: 1080px;
}

.txt_area-l{
	font-size: 14px;
	    opacity: 1;
	/*padding: 20px;*/
	padding: 15px 25px;
	box-sizing: border-box;
	line-height: 1.8em;
}

*:focus {outline:none;}
html{font-size:100%;}
body{-webkit-text-size-adjust: 100%;}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

a{
	color: black;
}

#page-top{
	right: 2.5%;
}

#page-top img{
	    max-width: 1.5rem;
}

#page-top a{
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
#page-top a:hover{
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
}
textarea{overflow: auto}

body{
	background-color: #e8ecef;
}

.btn{
	display: block;
    padding: 10px 5px;
    border: 1px solid black;
    max-width: 300px;
    text-align: center;
}

.gift_banner, .gift_banner2, .gift_banner3 {
    top: 40%;
    left: 0;
    padding: 30px 5px;
        background-color: rgb(255, 255, 255, 0.8);
    border: 1px solid black;
    z-index: 1;
    color: #5f5f5f;
    /* mix-blend-mode: difference; */
    font-size: 20px;
}

.gift_banner2 {
    top: auto;
    /* padding: 5px 30px; */
    bottom: 0;
    left: 0;
    /* width: 50%; */
    /* max-width: 260px; */
    box-sizing: border-box;
    text-align: center;
    height: 265px;
}

.gift_banner3 {
    top: auto;
    /* padding: 5px 30px; */
    bottom: 0;
    left: calc(1em + 31px);
    /* width: 50%; */
    /* max-width: 260px; */
    box-sizing: border-box;
    text-align: center;
    height: 265px;
}

/***　ヘッダー　***/
/*material*/
/*.nav_toggle {
  display: block;
  position: relative;
  width: 1.75rem;
  height: 1.5rem;
	cursor: pointer;
}*/

.nav_toggle {
        display: block;
    position: fixed;
    width: 2.7rem;
    height: 1.5rem;
    cursor: pointer;
    right: 2.5%;
    top: 40px;
	z-index: 3;
}

.nav_toggle i {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #959595;
  position: absolute;
  transition: transform .5s, opacity .5s;
}
.nav_toggle i:nth-child(1) {
  top: 0;
}
.nav_toggle i:nth-child(2) {
  top: 0;
  bottom: 0;
  margin: auto;
}
.nav_toggle i:nth-child(3) {
  bottom: 0;
}

.nav_toggle.show i:nth-child(1) {
  transform: translateY(10px) rotate(-45deg);
}
.nav_toggle.show i:nth-child(2) {
  opacity: 0;
}
.nav_toggle.show i:nth-child(3) {
  transform: translateY(-12px) rotate(45deg);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
	transition: all 0.5s;
}

.nav:before{
	content: "";
    display: block;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    position: absolute;
    top: 50%;
    left: 50%;
	border: 1px solid #8f8667;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    pointer-events: none;
}

.nav.show {
  opacity: 1;
  visibility: visible;
    background-color: var(--wh);
	    transition: opacity .5s, visibility .5s;
	transition: all 0.5s;
}

.nav.show > div > div.d_flex{
	margin-bottom: 50px;
}

.nav_ko .nav_menu_li a{
	font-size: 24px;
    margin-bottom: 10px;
}

.nav_ko .nav_menu_li a span{
	font-size: 16px;
}

.nav h2{
	filter: invert(1);
	max-width: 90px;
}

.nav .sita .nav_menu_li{
	border-bottom: 1px solid black;
}

header{
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}

header h1#logo{
    max-width: 160px;
    position: relative;
    top: 30px;
    left: 2.5%;
}

.lower header{
	position: relative;
}

.page_title > div{
	padding: 60px 0;
}

.page_title h1{
	max-width: 120px;
	filter: invert(0.8);
}

.page_title > span{
	font-size: 39px;
    opacity: 0.3;
	letter-spacing: 0.2em;
    line-height: 1em;
	    width: 100% !important;
}

.page_title > span span.small{
	font-size: 22px;
    vertical-align: top;
    letter-spacing: 0.2em;
    margin-right: 0.4em;
}

/***　インフォ　***/

.info{
	background-color: var(--black2);
    color: white;
    height: 700px;
    padding: 50px 0;
    box-sizing: border-box;
	position: relative;
    z-index: 2;
}

.info figure{
	height: 100%;
	overflow: hidden;
}

.info figure img{
	height: 100%;
    object-fit: cover;
    object-position: center;
}

h3.foot_logo{
	margin-bottom: 20px;
	    margin: 0px auto;
    border-bottom: 1px solid white;
    padding-bottom: 10px;
}

h3.foot_logo img{
	max-width: 150px;
}

.info dl dt, .info dl dd{
	margin-bottom: 20px;
}

.info dl dt{
	margin-right: 10px;
}

/***　マップ　***/
.g-map{
    width: 100%;
    position: relative;
    height: 350px;
    overflow: hidden;
    z-index: 2;
}

.g-map iframe{
    width: 100%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    display: block;
    height: 100%;
}

/***　フッター　***/

footer{
	background-color: black;
	color: var(--wh);
	text-align: center;
	padding: 100px 0;
	    z-index: 2;
    position: relative;
}

footer #footer > p{
	font-size: max(1.2vw, 16px);
	margin-bottom: 50px;
}

/***　index　***/



/***　lower　***/
.page_title h2{
	font-size: clamp(26px, 3vw, 46px);
	color:var(--bro);
	    line-height: 1.4em;
}

.lower main{
	background-color: white;
}




/***　　***/



/***　　***/



/***　IE対処　***/


/*--20240411 correct start--*/

.gift_banner2, .gift_banner3{
    font-size: 16px;
    text-align: left;
    padding: 10px 5px;
    transform: translateY(200px);
        transition: all 0.5s;
        border: none;
}

.gift_banner2 img, .gift_banner3 img{
    width: 32px;
    margin-bottom: 20px;
}

.gift_banner2:hover, .gift_banner3:hover{
    transform: none;
    transition: all 0.5s;
}


/*--20240411 correct end--*/

@media all and (-ms-high-contrast:none) {
}

.float_right{
	float: right
}
.float_left{
	float: left
}
.float_clear{
	float: none
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}

/* firefox のみ適用される */
@-moz-document url-prefix() {
  .contents1 h2{
  left: calc(50% - 2em);
}
}


/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	
#pager li:not(.prev):not(.next){
	display: none;
}

.float_right_tb{
	float: right
}
.float_left_tb{
	float: left
}
.float_clear_tb{
	float: none
}
.clearfix_tb::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
	
.mg_t-100px_tb{margin-top: 100px;}
	
.wrap{
	min-width: 100%;
}
	
	.page_title h1 {
    max-width: 90px;
    margin-left: 100px;
}
	
	header h1#logo {
    max-width: 100px;
}
	
	.nav > div.width_800-max{
	    padding: 20px;
	    box-sizing: border-box;
	}
	
	.gift_banner2{
       top: auto;
    padding: 5px 30px;
    bottom: 0;
    left: 0;
    width: 50%;
    max-width: 260px;
    box-sizing: border-box;
    text-align: center;
    height: auto;
}

.gift_banner3{
       top: auto;
    padding: 5px 30px;
    bottom: calc(1em + 31px);
    left: 0;
    width: 50%;
    max-width: 260px;
    box-sizing: border-box;
    text-align: center;
        height: auto;
}
	
	.info {
    height: auto;
}
	
	h3.foot_logo {
    padding: 50px 20px;
    margin-bottom: 20px;
    text-align: center;
    padding-left: 0;
}
	
.gift_banner2, .gift_banner3{
    font-size: 16px;
    text-align: left;
    padding: 10px 5px;
    transform: none;
        transition: all 0.5s;
        border: 1px solid black;
        
}

.gift_banner2 img, .gift_banner3 img{
    width: 32px;
    margin-bottom: 0px;
    margin-right: 10px;
    margin-left: 10px;
}
	
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){

.float_right_sp{
	float: right
}
.float_left_sp{
	float: left
}
.float_clear_sp{
	float: none
}
.clearfix_sp::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
	
	
/*lower*/
	
.page_title > span {
    font-size: 32px;
}
	
.page_title > span span.small {
    font-size: 16px;
    display: block;
}

.page_title h1 {
    max-width: 70px;
	margin: auto;
    margin-bottom: 50px;
	margin-right: 2.7rem;
}

.wrap{
	overflow: hidden;
}

.contents4 .grid_4 {
	margin-top: 5%;
}
	
.info {
    height: 100%;
}
	
h3.foot_logo{
	margin-bottom: 20px;
	    margin: 50px auto;
    border-bottom: 1px solid white;
    padding: 0;
    padding-bottom: 50px;
}

.nav h2 {
    display: none;
}
	
	.nav .nav_ko{
		width: 90% !important;
		margin: 0;
	}
	
	.nav .sita .grid_8{
		width: 90% !important;
	}
	
	.nav .btn{
		margin-top: 30px;
	}
	
	.nav:before {
    width: calc(100% - 15px);
    height: calc(100% - 15px);
}
	.nav div.width_800-max > div.d_flex{
	    width: 100% !important;
	}
	
	.info > div.grid_5{
	    width: 95% !important;
	    margin: 0;
	}
	
	
	.info dl dt, .info dl dd {
    width: 100% !important;
}
	
	.nav > div.width_800-max{
	    padding: 0px;
	    box-sizing: border-box;
	}
	
	footer #footer > p {
    letter-spacing: 0.01em;
}
	
	.nav .sita .nav_menu_li {
    border-bottom: 1px solid #8f8f8f;
    display: block;
    width: 95%;
}
	
.gift_banner2, .gift_banner3{
   font-size: 16px;
       padding: 5px 0px;
       width: 60%;
}
	
.gift_banner, .gift_banner2, .gift_banner3 {
    background-color: rgba(255, 255, 255, 0.8);
}
	
.gift_banner3 {
    bottom: calc(1em + 27px);
}
	
	
}