@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP:wght@500&display=swap');

/* 3 MediaQuery ---*/
@media screen and (max-width:767px) { /*SP*/
}
@media screen and (min-width:768px) and ( max-width:999px) { /*PC&TB*/
}
@media screen and (min-width:1000px) , print { /*PC*/
}
/* 2 MediaQuery ---*/
@media screen and (max-width:767px) { /*SP*/
}
@media screen and (min-width:768px) , print { /*PC&TB*/
}


@media screen and (max-width:767px) { /*SP*/
	#MDQ{ display: none; }
    .spNone{ display: none; }
    .tbNone{ display: none; }
    .pcNone{ display: block; }
}
@media screen and (min-width:768px) and ( max-width:999px) { /*TB*/
	#MDQ{ display: inline; }
    .spNone{ display: block; }
    .tbNone{ display: none; }
    .pcNone{ display: none; }
}
@media screen and (min-width:1000px) , print { /*PC*/
	#MDQ{ display: block; }
    .spNone{ display: block; }
    .tbNone{ display: none; }
    .pcNone{ display: none; }
}

@media screen and (max-width:767px) { /*SP*/
	body{
		font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ W3', sans-serif;
		line-height:1.7;
		font-feature-settings: 'palt' 1;
		letter-spacing: 0.08em;
		background-color: #fff;
	}
}

@media screen and (min-width:768px) , print { /*PC&TB*/
	body{
		font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ W3', sans-serif;
		line-height:1.7;
		font-feature-settings: 'palt' 1;
		letter-spacing: 0.08em;
		background-color: #fff;
	}
}

/*----------------------------------------------------------------------------------------
コンテンツ大枠
----------------------------------------------------------------------------------------*/

.windowWidth {
	width: 100%;
	margin: 0;
	padding: 0;
	clear: both;
}

.windowWidth a img{transition: 0.3s;}

.windowWidth a img:hover{
    opacity: 0.75;
	cursor: pointer;
}

@media screen and (max-width:767px) { /*SP*/
	.CW1000{
		max-width: initial;
		max-width: auto;
		margin:0 auto;
		padding: 0px 15px;
		box-sizing: border-box;
	}
	
	.CW1400{
		max-width: initial;
		max-width: auto;
		margin:0 auto;
		padding: 0px 15px;
		box-sizing: border-box;
	}
}

@media screen and (min-width:768px) and ( max-width:999px) { /*PC&TB*/
	.CW1000{
		max-width: initial;
		max-width: auto;
		margin:0 auto;
		padding: 0px 15px;
		box-sizing: border-box;
	}
	
	.CW1400{
		width: 1100px;
		margin:0 auto;
		padding: 0;
		box-sizing: border-box;
	}
}

@media screen and (min-width:1000px) , print { /*PC*/
	.CW1000{
		max-width: 1000px;
		margin:0 auto;
		padding: 0;
		box-sizing: border-box;
	}
	
	.CW1400{
		width: 1100px;
		margin:0 auto;
		padding: 0;
		box-sizing: border-box;
	}
}



/*----------------------------------------------------------------------------------------
TOPヘッダー
----------------------------------------------------------------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#headerSection{
		width: 100%;
		min-width: inherit;
		background-color: #fff;
		margin: 0px auto;
	}
	
	.headerContents {
		box-sizing: border-box;
		margin: 0px 0px 0px 15px;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: column;
		height: 150px;
	}
	
	.headerLogo{
		width: 60vw;
		
	}
	
	.headerSubTitle{
		text-align: center;
		display: none;
	}
	
	.menuBtn{
		height: 60px;
		width: 60px;
		position: fixed;
		top: 40px;
		right: 15px;
		z-index: 2000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: column;
		box-sizing: border-box;
		padding: 15px 10px;
		background-color: rgba(255,255,255,0.7);
		border-radius: 10px;
	}
	
	.menuBtn span{
		display: block;
		width: 100%;
		height: 2px;
		background-color: #000;
		transition: 0.3s ease;
	}
	
	.open.menuBtn{
		justify-content: center;
		color: #fff;
		background-color: rgba(51,51,51,1);
	}
    
    .open.menuBtn span:nth-of-type(1) {
		transform: translateY(2px) rotate(-135deg);
		background-color: #fff;
	}
	
    .open.menuBtn span:nth-of-type(2) {
		opacity: 0;
	}
	
	.open.menuBtn span:nth-of-type(3) {
		transform: translateY(-2px) rotate(135deg);
		background-color: #fff;
	}
}

@media screen and (min-width:768px) and ( max-width:999px) { /*PC&TB*/
	#headerSection{
		width: 100%;
		min-width: 1100px;
		background-color: #fff;
		margin: 0px auto;
	}
	
	.headerContents {
		box-sizing: border-box;
		margin: 0 auto;
		padding: 80px 0px 0px;
		position: relative;
	}
	
	.headerLogo{
		width: 446px;
		margin: 0px auto 50px;
	}
	
	.headerSubTitle{
		text-align: center;
	}
	
	.menuBtn,
	.menuBtnBD{
		display: none;
	}
}

@media screen and (min-width:1000px) , print { /*PC*/
	#headerSection{
		width: 100%;
		min-width: 1100px;
		background-color: #fff;
		margin: 0px auto;
	}
	
	.headerContents {
		box-sizing: border-box;
		margin: 0 auto;
		padding: 80px 0px 0px;
		position: relative;
	}
	
	.headerLogo{
		width: 446px;
		margin: 0px auto 50px;
	}
	
	.headerSubTitle{
		text-align: center;
	}
	
	.menuBtn,
	.menuBtnBD{
		display: none;
	}
}


/*----------------------------------------------------------------------------------------
Global Menu
----------------------------------------------------------------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#navigationSection{
		max-width: initial;
		max-width: auto;
		box-sizing: border-box;
		padding: 110px 15px 30px;
		margin: 0px auto 0px;
		width: 100%;
		height: 100vh;
		position: fixed;
		right: 0;
		top: 0;
		background-color: rgba(51,51,51,1);
		transition: 0.3s ease;
		z-index: 1000;
		transform: translateX(101%);
		font-size: 17px;
		overflow-y: auto;
	}
	
	#navigationSection.open{
		transform: translateX(0%);
	}
	
	.gNavBox{
		display: block;
	}
	
	.gNavBox a{
		width: 100%;
		display: block;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 5px 30px 5px 5px;
		border-left: none;
		border-bottom: 1px solid #fff;
		position: relative;
		color: #fff;
	}
	
	.gNavBox .gNavHome{
		display: block;
	}
	
	.gNavBox a::after{
		content: "";
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translateY(-50%) rotate(45deg);
		width: 10px;
		height: 10px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
	}
	
	.gNavBox a:last-child{
		border-right: none;
	}
}


@media screen and (min-width:768px) , print { /*PC&TB*/
	#navigationSection{
		min-width: 1100px;
		box-sizing: border-box;
		padding: 10px 0px 30px;
		margin: 0px auto;
	}
	
	.gNavBox{
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
		line-height: 1.3;
		font-size: 16px;
	}
	
	.gNavBox a{
		display: block;
		padding: 3px 10px;
		border-left: 1px solid #000;
		transition: .3s;
	}
	
	.gNavBox a:first-child{
		display: none;
	}
	
	.gNavBox a:last-child{
		border-right: 1px solid #000;
	}
	
	.gNavBox a:hover{
		background-color: #e9e0d6;
	}
}



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

/*------------------------------- footerFAQSection ------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#footerFAQSection{
		padding: 70px 0px 0px;
		text-align: center;
	}
	
	.footerFAQTitle{
		margin-bottom: 30px;
	}
	
	.footerFAQTitle h3{
		font-family: 'Noto Serif JP', serif;
		font-size: 26px;
		margin-bottom: 5px;
	}
	
	.footerFAQLink{
		width: 100%;
		margin: 0px auto 0px auto;
		position: relative;
		z-index: 0;
		
	}
	
	.footerFAQLink::before{
		width: 95%;
		content: '';
		position: absolute;
		top: 0px;
		left: -15px;
		height: 10px;
		background-color: #000;
	}
	
	.footerFAQLink::after{
		content: '';
		position: absolute;
		top: -22px;
		right: 3%;
		border-top: 16px solid transparent;
		border-right: 16px solid transparent;
		border-bottom: 16px solid #000;
		border-left: 16px solid #000;
	}
	
	.footerFAQLink a{
		display: block;
		box-sizing: border-box;
		padding: 30px 0px 15px;
		transition: .3s;
	}
	
	.footerFAQLink img{
		width: 75px;
	}
}


@media screen and (min-width:768px) , print { /*PC&TB*/
	#footerFAQSection{
		padding: 90px 0px 0px;
		text-align: center;
	}
	
	.footerFAQTitle{
		margin-bottom: 30px;
	}
	
	.footerFAQTitle h3{
		font-family: 'Noto Serif JP', serif;
		font-size: 32px;
		margin-bottom: 5px;
	}
	
	.footerFAQLink{
		width: 50%;
		margin: 0px auto;
		position: relative;
		z-index: 0;
		border-top: 10px solid #000;
	}
	
	.footerFAQLink::after{
		content: '';
		position: absolute;
		top: -36px;
		right: -10px;
		border-top: 18px solid transparent;
		border-right: 18px solid transparent;
		border-bottom: 18px solid #000;
		border-left: 18px solid #000;
	}
	
	.footerFAQLink a{
		display: block;
		box-sizing: border-box;
		padding: 20px 0px 15px;
		transition: .3s;
	}
	
	.footerFAQLink a:hover{
		background-color: #e9e0d6;
	}
	
	.footerFAQLink img{
		width: 75px;
	}
}


/*------------------------------- footerSection ------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#footerSection{
		padding: 70px 0px 40px;
		background-color: #fff;
	}
	
	.footerContents{
		width: auto;
		margin: 0px auto;
		text-align: center;
	}
	
	.footerLogo{
		width: 47px;
		margin: 0px auto 30px;
	}
	
	.footerContents ul{
		margin-bottom: 5px;
		font-size: 12px;
	}
	
	.footerContents li{
		display: inline-block;
		margin: 0px 2px;
	}
	
	.footerContents li a {
		position: relative;
		display: inline-block;
		text-decoration: none;
	}
	
	.footerContents li a::after {
		position: absolute;
		bottom: -2px;
		left: 0;
		content: '';
		width: 100%;
		height: 2px;
		background: #333;
		transform: scale(0, 1);
		transform-origin: right top;
		transition: transform .3s;
	}
	
	.footerContents li a:hover::after {
		transform-origin: left top;
		transform: scale(1, 1);
	}
	
	.footerCopy{
		font-size: 10px;
	}
}


@media screen and (min-width:768px) , print { /*PC&TB*/
	#footerSection{
		padding: 90px 0px 50px;
		background-color: #fff;
	}
	
	.footerContents{
		width: 1100px;
		margin: 0px auto;
		text-align: center;
	}
	
	.footerLogo{
		width: 47px;
		margin: 0px auto 50px;
	}
	
	.footerContents ul{
		margin-bottom: 5px;
	}
	
	.footerContents li{
		display: inline-block;
		margin: 0px 5px;
	}
	
	.footerContents li a {
		position: relative;
		display: inline-block;
		text-decoration: none;
	}
	
	.footerContents li a::after {
		position: absolute;
		bottom: -2px;
		left: 0;
		content: '';
		width: 100%;
		height: 2px;
		background: #333;
		transform: scale(0, 1);
		transform-origin: right top;
		transition: transform .3s;
	}
	
	.footerContents li a:hover::after {
		transform-origin: left top;
		transform: scale(1, 1);
	}
	
	.footerCopy{
		font-size: 12px;
	}
}


/*----------------------------------------------------------------------------------------
TOP
----------------------------------------------------------------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	.subTitleStyle01{
		width: 149px;
		margin: 0px auto 40px;
	}
}
@media screen and (min-width:768px) , print { /*PC&TB*/
	.subTitleStyle01{
		width: 179px;
		margin: 0px auto 50px;
	}
}



/*------------------------------- topNewInfoSection ------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#topNewInfoSection{
		min-width: inherit;
		margin: 0px auto 60px;
	}
	
	.topNewInfoWrap{
		max-width: inherit;
		margin: 0px auto;
		box-sizing: border-box;
		display: block;
	}
	
	.topNewInfoImg{
		background-color: #ebebeb;
		width: 100%;
		display: block;
	}
	
	.topNewInfoImg img{
		max-height: inherit;
		max-width: inherit;
		width: 100%;
		height: auto;
	}
	
	.topNewInfoTextBox{
		width: 100%;
		box-sizing: border-box;
		background-color: #e9e0d6;
		position: relative;
		display: block;
	}
	
	.topNewInfoTextBox::before{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		display: block;
		border-top: 30px solid #c7b299;
		border-right: 30px solid transparent;
	}
	
	.topNewInfoTextBox::after{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		display: block;
		border-bottom: 30px solid #fff;
		border-left: 30px solid transparent;
	}
	
	.topNewInfoTextBox h2{
		position: absolute;
		top: -85px;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.topNewInfoTextDesc{
		box-sizing: border-box;
		padding: 90px 15px 80px 15px;
	}
	
	.topNew_number{
		font-size: 20px;
		margin-bottom: 30px;
		text-align: center;
	}
	
	.topNewInfoTextBox h3{
		font-family: 'Noto Serif JP', serif;
		font-size: 28px;
		font-weight: normal;
		line-height: 1.4;
		margin-bottom: 30px;
	}
	
	.topNew_Text01{
		width: 100%;
		line-height: 2.0;
		font-size: 16px;
	}
	
	.topNewInfoLink{
		position: absolute;
		bottom: 20px;
		left: 0;
		font-family: 'Noto Serif JP', serif;
		font-size: 24px;
		width: 85%;
	}
	
	.topNewInfoLink a{
		width: 100%;
		display: block;
		text-align: right;
		position: relative;
		z-index: 0;
	}
	
	.topNewInfoLink a::before{
		width: 70%;
		content: '';
		position: absolute;
		z-index: -1;
		bottom: 10px;
		left: 0px;
		height: 10px;
		background-color: #000;
	}
	
	.topNewInfoLink a::after{
		content: '';
		position: absolute;
		z-index: -1;
		bottom: 10px;
		left: 68%;
		border-top: 16px solid transparent;
		border-right: 16px solid transparent;
		border-bottom: 16px solid #000;
		border-left: 16px solid #000;
	}
}


@media screen and (min-width:768px) , print { /*PC&TB*/
	#topNewInfoSection{
		min-width: 1100px;
		margin: 0px auto 60px;
	}
	
	.topNewInfoWrap{
		max-width: 2000px;
		margin: 0px auto;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	
	.topNewInfoImg{
		background-color: #ebebeb;
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	
	.topNewInfoImg img{
		max-height: 100%;
		max-width: 100%;
		width: auto;
		height: auto;
	}
	
	.topNewInfoTextBox{
		width: 50%;
		box-sizing: border-box;
		background-color: #e9e0d6;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	
	.topNewInfoTextBox::before{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		display: block;
		border-top: 50px solid #c7b299;
		border-right: 50px solid transparent;
	}
	
	.topNewInfoTextBox::after{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		display: block;
		border-bottom: 50px solid #fff;
		border-left: 50px solid transparent;
	}
	
	.topNewInfoTextBox h2{
		position: absolute;
		top: 10%;
		left: -90px;
	}
	
	.topNewInfoTextDesc{
		box-sizing: border-box;
		padding: 8% 30px 120px 120px;
	}
	
	.topNew_number{
		font-size: 20px;
		margin-bottom: 50px;
	}
	
	.topNewInfoTextBox h3{
		font-family: 'Noto Serif JP', serif;
		font-size: 46px;
		font-weight: normal;
		line-height: 1.4;
		margin-bottom: 60px;
	}
	
	.topNew_Text01{
		width: 80%;
		line-height: 2.0;
		font-size: 16px;
	}
	
	.topNewInfoLink{
		position: absolute;
		bottom: 35px;
		left: 0;
		font-family: 'Noto Serif JP', serif;
		font-size: 24px;
		width: 50%;
	}
	
	.topNewInfoLink a{
		width: 100%;
		display: block;
		text-align: right;
		position: relative;
		z-index: 0;
	}
	
	.topNewInfoLink a::before{
		width: 80%;
		content: '';
		position: absolute;
		z-index: -1;
		bottom: 10px;
		left: 0px;
		height: 10px;
		background-color: #000;
	}
	
	.topNewInfoLink a::after{
		content: '';
		position: absolute;
		z-index: -1;
		bottom: 10px;
		right: 16%;
		border-top: 16px solid transparent;
		border-right: 16px solid transparent;
		border-bottom: 16px solid #000;
		border-left: 16px solid #000;
	}
}


/*------------------------------- topLeadSection ------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#topLeadSection{
		text-align: left;
		margin: 0px auto 40px;
		font-family: 'Noto Serif JP', serif;
	}
	
	#topLeadSection h4{
		font-size: 24px;
		font-weight: normal;
		margin-bottom: 20px;
	}
	
	#topLeadSection p{
		line-height: 2.0;
	}
}
@media screen and (min-width:768px) , print { /*PC&TB*/
	#topLeadSection{
		text-align: center;
		margin: 0px auto 70px;
		font-family: 'Noto Serif JP', serif;
	}
	
	#topLeadSection h4{
		font-size: 24px;
		font-weight: normal;
		margin-bottom: 30px;
	}
	
	#topLeadSection p{
		line-height: 2.0;
	}
}


/*------------------------------- topShelfSection ------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#topShelfSection{
		width: 100%;
		overflow: hidden;
		min-width: inherit;
		margin: 0px auto 50px;
	}
	
	.topShelfWrap{
		padding-bottom: 0px;
		margin-bottom: 30px;
		position: relative;
	}
	
	.shelfSlide{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 0px 15px;
	}	
	
	.shelfSlide img{
		max-width: 100%;
	}
	
	.shelfSlide .sld{
		width: calc((100% - (11px*1)) /2);
		margin-right: 10px;
		margin-bottom: 0px;
		background-color: #fff;
		text-align: center;
		position: relative;
	}
	
	.shelfSlide .sld:nth-child(2n){
		width: calc((100% - (11px*1)) /2);
		margin-right: 0px;
		margin-bottom: 0px;
	}
	
	.shelfSlide .sld:nth-child(2n)::after{
		content: '';
		display: block;
		width: 300%;
		height: 60px;
		transform: translateX(-50%);
		margin-left: -3px;
		background-image: url(../image/top2009/shelf_back.jpg);
		background-position: center left;
		background-repeat: repeat-x;
		background-size: auto 100%;
	}
	
	.shelfSlide .sld p{
		position: absolute;
		z-index: 1;
		top: -40px;
		right: 10px;
		width: 60px;
	}
	
	.topBackNumLink{
		width: 100%;
		margin: 60px 0px 0px auto;
		text-align: left;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	
	.topBackNumLink a img{
		width: 178px;
	}
	
	.topBackNumLink a{
		width: 80%;
		display: block;
		position: relative;
		z-index: 0;
		padding: 30px 15px 20px;
		box-sizing: border-box;
		transition: 0.3s ease;
		transform: translateX(15px);
	}
	
	.topBackNumLink a::before{
		width: 100%;
		content: '';
		position: absolute;
		z-index: -1;
		top: 0px;
		left: 0px;
		height: 10px;
		background-color: #000;
	}
	
	.topBackNumLink a::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: -22px;
		left: -9px;
		border-top: 16px solid transparent;
		border-right: 16px solid #000;
		border-bottom: 16px solid #000;
		border-left: 16px solid transparent;
	}
	
	.topBackNumLink a:hover img{opacity: 1;}
}


@media screen and (min-width:768px) , print { /*PC&TB*/		
	#topShelfSection{
		width: 100%;
		overflow: hidden;
		min-width: 1100px;
		margin: 0px auto 70px;
	}
	
	.topShelfWrap{
		padding-bottom: 113px;
		margin-bottom: 20px;
		position: relative;
	}
	
	.topShelfWrap::after{
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 113px;
		background-image: url(../image/top2009/shelf_back.jpg);
		background-position: center center;
		background-repeat: repeat;
		background-size: auto auto;
	}
	
	.shelfSlide img{
		max-width: 250px;
	}
	
	.shelfSlide .sld{
		margin: 0px 5px;
		position: relative;
	}
	
	.shelfSlide .sld:first-child{
		margin-left: 0px;
	}
	
	.shelfSlide .sld p{
		position: absolute;
		z-index: 1;
		top: -40px;
		right: 10px;
	}
	
	.topShelfWrap .sheftPrev{
		position: absolute;
		z-index: 1;
		bottom: -50px;
		left: -40%;
		right: 0;
		margin: auto;
		content: '';
		display: block;
		width: 25px;
		height: 38px;
		background-image: url(../image/top2009/shelf_prev.png);
		background-position: center center;
		background-repeat: repeat;
		background-size: 100% auto;
	}
	
	.topShelfWrap .sheftNext{
		position: absolute;
		z-index: 1;
		bottom: -50px;
		left: 0;
		right: -40%;
		margin: auto;
		content: '';
		display: block;
		width: 25px;
		height: 38px;
		background-image: url(../image/top2009/shelf_next.png);
		background-position: center center;
		background-repeat: repeat;
		background-size: 100% auto;
	}
	
	.topShelfWrap .sheftPrev:hover,
	.topShelfWrap .sheftNext:hover{
		cursor: pointer;
	}
	
	.shelfSlide .slick-list {
		overflow:inherit;
	}
	
	.topBackNumLink{
		width: 30%;
		margin: 0px auto;
		text-align: center;
	}
	
	.topBackNumLink a img{
		width: 198px;
	}
	
	.topBackNumLink a{
		width: 100%;
		display: block;
		position: relative;
		z-index: 0;
		padding: 30px 15px 20px;
		box-sizing: border-box;
		transition: 0.3s ease;
	}
	
	.topBackNumLink a::before{
		width: 100%;
		content: '';
		position: absolute;
		z-index: -1;
		top: 0px;
		left: 0px;
		height: 10px;
		background-color: #000;
	}
	
	.topBackNumLink a::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: -22px;
		right: -9px;
		border-top: 16px solid transparent;
		border-right: 16px solid transparent;
		border-bottom: 16px solid #000;
		border-left: 16px solid #000;
	}
	
	.topBackNumLink a:hover {
		background-color: #e9e0d6;
	}
	
	.topBackNumLink a:hover img{opacity: 1;}
}


/*------------------------------- topIntroductionSection ------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#topIntroductionSection{
		min-width: inherit;
		margin: 0px auto 70px;
		padding: 30px 0px 10px;
		background-image: url(../image/top2009/introduction_back.jpg);
		background-position: center center;
		background-repeat: repeat;
		background-size: auto auto;
	}
	
	.topIntroContainer{
		display: block;
	}
	
	.topIntroFlBox0301{
		width: 100%;
		margin-right: 0px;
		margin-bottom: 120px;
		padding: 15px;
		background-color: #fff;
		box-sizing: border-box;
		border: 3px solid #000;
		position: relative;
	}
	
	.topIntroFlBox0301:nth-child(3n){
		width: 100%;
		margin-right: 0px;
		margin-bottom: 120px;
		padding: 15px;
		background-color: #fff;
		box-sizing: border-box;
		border: 3px solid #000;
		position: relative;
	}
	
	.topIntroImg{
		position: relative;
		margin-bottom: 20px;
	}
	
	.topIntroLabel{
		width: 111px;
		position: absolute;
		top: -15px;
		left: -15px;
		z-index: 1;
	}
	
	.topIntroTextBox{
	}
	
	.topIntroSubTitle{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		font-size: 16px;
		margin-bottom: 30px;
	}
	
	.topIntroSubTitle p:first-child{
		margin-right: 10px;
	}
	
	.topIntroSubTitle .it01,
	.topIntroSubTitle .it02,
	.topIntroSubTitle .it03{
		margin-left: auto;
	}
	
	.topIntroSubTitle .it01 img{max-width: 132px;}
	.topIntroSubTitle .it02 img{max-width: 90px;}
	.topIntroSubTitle .it03 img{max-width: 94px;}
	
	.topInt_numList{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	
	.topInt_numList li{
		margin-bottom: 10px;
		width: calc( 100% / 3);
		text-align: center;
		box-sizing: border-box;
		font-size: 16px;
	}
	
	.topInt_numList li a{
		padding: 3px 5px 5px;
		display: inline-block;
		box-sizing: border-box;
		position: relative;
	}
	
	.topInt_numList li:first-child{border-left: 5px solid #736357;}
	.topInt_numList li:nth-child(2){border-left: 5px solid #f7931e;}
	.topInt_numList li:nth-child(3){border-left: 5px solid #39b54a; border-right: 5px solid #29abe2;}
	.topInt_numList li:nth-child(4){border-left: 5px solid #22b573;}
	.topInt_numList li:nth-child(5){border-left: 5px solid #ed1c24;}
	.topInt_numList li:nth-child(6){border-left: 5px solid #f7931e; border-right: 5px solid #736357;}
	.topInt_numList li:nth-child(7){border-left: 5px solid #736357;}
	.topInt_numList li:nth-child(8){border-left: 5px solid #f7931e;}
	.topInt_numList li:nth-child(9){border-left: 5px solid #39b54a; border-right: 5px solid #29abe2;}
	
	.topInt_YT_link{
		text-align: right;
	}
	
	.topInt_YT_link a{
		padding: 0px 0px 5px;
		display: inline-block;
		box-sizing: border-box;
		position: relative;
	}	
	
	.topInt_textDesc{
		padding: 0px 20px 0px;
		line-height: 1.8;
		font-family: 'Noto Serif JP', serif;
		box-sizing: border-box;
		min-height: 215px;
		background-image: url(../image/top2009/intro_textbox_back.png), url(../image/top2009/intro_textbox_back.png);
		background-position: top left, top right;
		background-repeat: repeat-y, repeat-y;
		background-size: 6px auto, 6px auto;
	}
	
	.topInt_BText{
		font-size: 26px;
		line-height: 1.3;
		margin-bottom: 20px;
		text-align: center;
	}
	
	
	.topIntroLink{
		position: absolute;
		bottom: -85px;
		left: 0;
		font-family: 'Noto Serif JP', serif;
		font-size: 20px;
		width: 100%;
	}
	
	.topIntroLink a{
		width: 100%;
		display: block;
		text-align: left;
		position: relative;
		z-index: 0;
	}
	
	.topIntroLink a span{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		width: 70px;
		height: 70px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 50%;
	}
	
	.topIntroLink a::before{
		width: 93%;
		content: '';
		position: absolute;
		z-index: -1;
		top: 50%;
		left: 0px;
		height: 10px;
		background-color: #fff;
		transform: translateY(-50%);
	}
	
	.topIntroLink a::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: 12%;
		left: 93%;
		border-top: 16px solid transparent;
		border-right: 16px solid transparent;
		border-bottom: 16px solid #fff;
		border-left: 16px solid #fff;
	}
}


@media screen and (min-width:768px) , print { /*PC&TB*/		
	#topIntroductionSection{
		min-width: 1100px;
		margin: 0px auto 110px;
		padding: 30px 0px;
		background-image: url(../image/top2009/introduction_back.jpg);
		background-position: center center;
		background-repeat: repeat;
		background-size: auto auto;
	}
	
	.topIntroContainer{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	.topIntroFlBox0301{
		width: calc((100% - (51px*2)) /3);
		margin-right: 50px;
		margin-bottom: 70px;
		padding: 15px;
		background-color: #fff;
		box-sizing: border-box;
		border: 3px solid #000;
		position: relative;
	}
	
	.topIntroFlBox0301:nth-child(3n){
		width: calc((100% - (51px*2)) /3);
		margin-right: 0px;
		margin-bottom: 70px;
		padding: 15px;
		background-color: #fff;
		box-sizing: border-box;
		border: 3px solid #000;
		position: relative;
	}
	
	.topIntroImg{
		position: relative;
		margin-bottom: 20px;
	}
	
	.topIntroLabel{
		width: 141px;
		position: absolute;
		top: -15px;
		left: -15px;
		z-index: 1;
	}
	
	.topIntroTextBox{
	}
	
	.topIntroSubTitle{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		font-size: 18px;
		margin-bottom: 30px;
	}
	
	.topIntroSubTitle p:first-child{
		margin-right: 10px;
	}
	
	.topIntroSubTitle .it01,
	.topIntroSubTitle .it02,
	.topIntroSubTitle .it03{
		margin-left: auto;
	}
	
	.topIntroSubTitle .it01 img{max-width: 172px;}
	.topIntroSubTitle .it02 img{max-width: 130px;}
	.topIntroSubTitle .it03 img{max-width: 134px;}
	
	.topInt_numList{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	
	.topInt_numList li{
		margin-bottom: 10px;
		width: calc( 100% / 3);
		text-align: center;
		box-sizing: border-box;
		font-size: 18px;
	}
	
	.topInt_numList li a{
		padding: 3px 5px 5px;
		display: inline-block;
		box-sizing: border-box;
		position: relative;
	}
	
	.topInt_numList li:first-child{border-left: 5px solid #736357;}
	.topInt_numList li:nth-child(2){border-left: 5px solid #f7931e;}
	.topInt_numList li:nth-child(3){border-left: 5px solid #39b54a; border-right: 5px solid #29abe2;}
	.topInt_numList li:nth-child(4){border-left: 5px solid #22b573;}
	.topInt_numList li:nth-child(5){border-left: 5px solid #ed1c24;}
	.topInt_numList li:nth-child(6){border-left: 5px solid #f7931e; border-right: 5px solid #736357;}
	.topInt_numList li:nth-child(7){border-left: 5px solid #736357;}
	.topInt_numList li:nth-child(8){border-left: 5px solid #f7931e;}
	.topInt_numList li:nth-child(9){border-left: 5px solid #39b54a; border-right: 5px solid #29abe2;}
	
	.topInt_YT_link{
		text-align: right;
	}
	
	.topInt_YT_link a{
		padding: 0px 0px 5px;
		display: inline-block;
		box-sizing: border-box;
		position: relative;
	}
	
	.topInt_numList li a::after,
	.topInt_YT_link a::after{
		position: absolute;
		bottom: 0px;
		left: 0;
		content: '';
		width: 100%;
		height: 2px;
		background: #333;
		transform: scale(0, 1);
		transform-origin: right top;
		transition: transform .3s;
	}
	
	.topInt_numList li a:hover::after,
	.topInt_YT_link a:hover::after{
		transform-origin: left top;
		transform: scale(1, 1);
	}
	
	
	.topInt_textDesc{
		padding: 0px 20px 0px;
		line-height: 1.9;
		font-family: 'Noto Serif JP', serif;
		box-sizing: border-box;
		min-height: 256px;
		background-image: url(../image/top2009/intro_textbox_back.png), url(../image/top2009/intro_textbox_back.png);
		background-position: top left, top right;
		background-repeat: repeat-y, repeat-y;
		background-size: 6px auto, 6px auto;
	}
	
	.topInt_BText{
		font-size: 32px;
		line-height: 1.3;
		margin-bottom: 25px;
		text-align: center;
	}
	
	
	.topIntroLink{
		position: absolute;
		bottom: -85px;
		left: 0;
		font-family: 'Noto Serif JP', serif;
		font-size: 20px;
		width: 100%;
	}
	
	.topIntroLink a{
		width: 100%;
		display: block;
		text-align: left;
		position: relative;
		z-index: 0;
	}
	
	.topIntroLink a span{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		width: 70px;
		height: 70px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 50%;
	}
	
	.topIntroLink a::before{
		width: 93%;
		content: '';
		position: absolute;
		z-index: -1;
		top: 50%;
		left: 0px;
		height: 10px;
		background-color: #fff;
		transform: translateY(-50%);
	}
	
	.topIntroLink a::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: 12%;
		left: 93%;
		border-top: 16px solid transparent;
		border-right: 16px solid transparent;
		border-bottom: 16px solid #fff;
		border-left: 16px solid #fff;
	}
	
}


/*------------------------------- topScenerySection ------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#topScenerySection{
		min-width: inherit;
		margin: 0px auto 90px;
		overflow: hidden;
	}
	
	.topSceneryDL{
		text-align: center;
		margin-bottom: 30px;
	}
	
	.topSceneryDL ul{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-left: 0px;
	}
	
	.topSceneryDL li{
		padding: 0px 5px;
		border-right: 1px solid #000;
	}
	
	.topSceneryDL li:first-child{
		width: 100%;
		border-right: none;
		margin-bottom: 5px;
	}
	
	.topSceneryDL li:nth-child(2){
		border-left: 1px solid #000;
	}
	
	.topSceneryDL li a{
		padding: 0px 0px 2px;
		display: inline-block;
		box-sizing: border-box;
		position: relative;
	}
	
	.topSceneryWrap{
		max-width: inherit;
		margin: 0px 15px;
		padding: 20px;
		box-sizing: border-box;
		position: relative;
		z-index: 0;
	}
	
	.topSceneryWrap img{
		max-width: inherit;
		width: 100%;
	}
	
	.topSceneryWrap_backTop{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 82px;
	}
	
	.topSceneryWrap_backTop::before{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 82px;
		height: 82px;
		background-image: url(../image/top2009/scenery_back.png);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 82px auto;
	}
	
	.topSceneryWrap_backTop::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		width: 82px;
		height: 82px;
		background-image: url(../image/top2009/scenery_back.png);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 82px auto;
		transform: rotate(90deg);
	}
	
	.topSceneryWrap_backBtm{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 82px;
	}
	
	.topSceneryWrap_backBtm::before{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 82px;
		height: 82px;
		background-image: url(../image/top2009/scenery_back.png);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 82px auto;
		transform: rotate(270deg);
	}
	
	.topSceneryWrap_backBtm::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		width: 82px;
		height: 82px;
		background-image: url(../image/top2009/scenery_back.png);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 82px auto;
		transform: rotate(180deg);
	}
	
}

@media screen and (min-width:768px) , print { /*PC&TB*/		
	#topScenerySection{
		min-width: 1100px;
		margin: 0px auto 90px;
		overflow: hidden;
	}
	
	.topSceneryDL{
		text-align: center;
		margin-bottom: 30px;
	}
	
	.topSceneryDL ul{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		margin-left: 30px;
	}
	
	.topSceneryDL li{
		margin: 0px 10px;
		padding-right: 15px;
		border-right: 1px solid #000;
	}
	
	.topSceneryDL li a{
		padding: 0px 0px 2px;
		display: inline-block;
		box-sizing: border-box;
		position: relative;
	}
	
	.topSceneryDL li a::after{
		position: absolute;
		bottom: 0px;
		left: 0;
		content: '';
		width: 100%;
		height: 2px;
		background: #333;
		transform: scale(0, 1);
		transform-origin: right top;
		transition: transform .3s;
	}
	
	.topSceneryDL li a:hover::after{
		transform-origin: left top;
		transform: scale(1, 1);
	}
	
	.topSceneryWrap{
		max-width: 1800px;
		margin: 0px auto;
		padding: 20px;
		box-sizing: border-box;
		position: relative;
		z-index: 0;
	}
	
	.topSceneryWrap img{
		max-width: inherit;
		width: 100%;
	}
	
	.topSceneryWrap_backTop{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 163px;
	}
	
	.topSceneryWrap_backTop::before{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 163px;
		height: 163px;
		background-image: url(../image/top2009/scenery_back.png);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 163px auto;
	}
	
	.topSceneryWrap_backTop::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		width: 163px;
		height: 163px;
		background-image: url(../image/top2009/scenery_back.png);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 163px auto;
		transform: rotate(90deg);
	}
	
	.topSceneryWrap_backBtm{
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 163px;
	}
	
	.topSceneryWrap_backBtm::before{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 163px;
		height: 163px;
		background-image: url(../image/top2009/scenery_back.png);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 163px auto;
		transform: rotate(270deg);
	}
	
	.topSceneryWrap_backBtm::after{
		content: '';
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		width: 163px;
		height: 163px;
		background-image: url(../image/top2009/scenery_back.png);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 163px auto;
		transform: rotate(180deg);
	}
	
}


/*------------------------------- topContentsWrap ------------------------------*/

@media screen and (max-width:767px) { /*SP*/
	#topHibiSection{
		min-width: inherit;
		margin: 0px auto;
		overflow: hidden;
	}
	
	.topHibiSubTitle{
		text-align: center;
		margin: -15px 0px 30px;
	}
	
	.topHibiSubTitle img{
		width: 238px;
	}
	
	.topHibiWrap{
		max-width: inherit;
		margin: 0px auto;
		box-sizing: border-box;
		position: relative;
		z-index: 0;
		overflow: hidden;
	}

	.topHibiSlide{
		width: 100%;
		height: auto;
		position: relative;
	}
	
	.topHibiSlide ul{
		float: none;
		display: block;
	}
	
	.topHibiSlide #loopleft {
		display: none;
	}
	
	.topHibiSlide #loopright {
		display: none;
	}
	
	#show_tile{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		height: auto;
		width: auto;
	}
	
	.tile01{
		width: calc((100% - (6px*2)) /3);
		margin-right: 5px;
		margin-bottom: 5px;
		padding-top: calc((100% - (6px*2)) /3);
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		position: relative;
		overflow: hidden;
	}
	
	.tile01:nth-child(3n){
		width: calc((100% - (6px*2)) /3);
		margin-right: 0px;
		margin-bottom: 5px;
		padding-top: calc((100% - (6px*2)) /3);
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		position: relative;
		overflow: hidden;
	}
	
	.tile01 img{
		position: absolute;
		top: 50%;
		left: 50%;
		margin: auto;
		width: auto;
		height: auto;
		max-width: 200%;
		max-height: 200%;
		flex-shrink: 0;
		transform: translate(-50%, -50%);
	}
}

@media screen and (min-width:768px) , print { /*PC&TB*/		
	#topHibiSection{
		min-width: 1100px;
		margin: 0px auto;
		overflow: hidden;
	}
	
	.topHibiSubTitle{
		text-align: center;
		margin: -15px 0px 30px;
	}
	
	.topHibiSubTitle img{
		width: 238px;
	}
	
	.topHibiWrap{
		max-width: 1800px;
		margin: 0px auto;
		box-sizing: border-box;
		position: relative;
		z-index: 0;
		overflow: hidden;
	}

	.topHibiSlide{
		width: 100%;
		height: 620px;
		position: relative;
	}
	
	.topHibiSlide ul{
		float: left;
		display: inline-block;
		overflow: hidden;
	}
	
	.topHibiSlide #loopleft {
		top: 0;
		left: 0;
		width: 150px;
		height: 100%;
		line-height: 100px;
		color: #c1272d;
		text-align: center;
		font-weight: bold;
		font-size: 40px;
		background: linear-gradient( to right, rgba(255, 255, 255, 1.0) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.0));
  background-size: cover;
		position: absolute;
		overflow: hidden;
		cursor: pointer;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.topHibiSlide #loopright {
		top: 0;
		right: 0;
		width: 150px;
		height: 100%;
		line-height: 100px;
		color: #c1272d;
		text-align: center;
		font-weight: bold;
		font-size: 40px;
		background: linear-gradient( to left, rgba(255, 255, 255, 1.0) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.0));
  background-size: cover;
		position: absolute;
		overflow: hidden;
		cursor: pointer;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#show_tile{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: column;
		height: 620px;
		/*width: 2060px;*/
		width: 1442px;
	}
	
	.tile01 {
		width:190px;
		height:190px;
		margin:0 8px 16px;
		word-break:break-all;
		position:relative;
		overflow: hidden;
		background-color: #ccc;
	}
	
	.tile01 img{
		max-width: 350px;
		max-height: 350px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: auto;
		height: auto;
	}
}