@charset "utf-8";

/******************************************************
 SP・PC共通
******************************************************/
/* topMain */
#topMain .imgLogo {
	animation-name: fadeinTopLogo;
	animation-duration: 2s;
	animation-delay: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeinTopLogo {
	0%   { opacity: 0;}
	100% { opacity: 1;}
}

/******************************************************
 SP
******************************************************/
@media only screen and (max-width: 768px) {
	/* topMain */
	#topMain {
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url(/img/top/top_main_bg.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		z-index: 1;
	}
	#topMain .imgLogo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-65%) translateX(-50%);
		-webkit-transform: translateY(-65%) translateX(-50%);
		width: 50px;
		height: 190px;
		background-image: url(/img/common/img_logo.png);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		text-indent: -9999px;
	}
	
	/* topgift */
	#topgiftNav {
		background-image: url(/img/common/bg_c_01.png);
		background-repeat: repeat;
		background-position: center center;
		background-size: cover;
	}
	#topgiftNav .item a {
		display: block;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		text-decoration: none;
	}
	#topgiftNav .item a::before {
		content: '';
		display: block;
		padding-top: 43.0052%;
	}
	#topgiftNav .item:not(:last-child) {
		margin-bottom: 5px;
	}
	#topgiftNav .item:nth-child(1) a { background-image: url(/img/top/index_gift_01_sp.png);}
	#topgiftNav .item .hn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		line-height: 1;
		width: 90%;
	}
	#topgiftNav .item .hn span {
		display: block;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 2.6rem;
		font-style: italic;
		letter-spacing: 0;
	}
	
	/* topIndexNav */
	#topIndexNav .item a {
		display: block;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		text-decoration: none;
	}
	#topIndexNav .item a::before {
		content: '';
		display: block;
		padding-top: 72.0052%;
	}
	#topIndexNav .item:not(:last-child) {
		margin-bottom: 5px;
	}
	#topIndexNav .item:nth-child(1) a { background-image: url(/img/top/index_nav_01_sp.png);}
	#topIndexNav .item:nth-child(2) a { background-image: url(/img/top/index_nav_02_sp.png);}
	#topIndexNav .item:nth-child(3) a { background-image: url(/img/top/index_nav_03_sp.png);}
	#topIndexNav .item:nth-child(4) a { background-image: url(/img/top/index_nav_04_sp.png);}
	#topIndexNav .item .hn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		font-size: 2.4rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		line-height: 1;
	}
	#topIndexNav .item .hn span {
		display: block;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 3.2rem;
		font-style: italic;
		letter-spacing: 5px;
		padding-bottom: 30px;
	}
	
	/* topLead */
	#topLead {
		width: 100%;
		padding: 100px 30px;
		background-image: url(/img/top/top_lead_bg.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		margin-bottom: 5px;
	}
	#topLead .hn {
		font-size: 2.6rem;
		font-weight: bold;
		padding-bottom: 1.5em;
		text-align: center;
	}
	#topLead p {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2.0rem;
		line-height: 2.4;
	}
	
	/* topIndexNav */
	#topIndexNav .item a {
		display: block;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		text-decoration: none;
	}
	#topIndexNav .item a::before {
		content: '';
		display: block;
		padding-top: 72.0052%;
	}
	#topIndexNav .item:not(:last-child) {
		margin-bottom: 5px;
	}
	#topIndexNav .item:nth-child(1) a { background-image: url(/img/top/index_nav_01_sp.png);}
	#topIndexNav .item:nth-child(2) a { background-image: url(/img/top/index_nav_02_sp.png);}
	#topIndexNav .item:nth-child(3) a { background-image: url(/img/top/index_nav_03_sp.png);}
	#topIndexNav .item:nth-child(4) a { background-image: url(/img/top/index_nav_04_sp.png);}
	#topIndexNav .item .hn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		font-size: 2.4rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		line-height: 1;
	}
	#topIndexNav .item .hn span {
		display: block;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 3.2rem;
		font-style: italic;
		letter-spacing: 5px;
		padding-bottom: 30px;
	}
	
	/* topInfo */
	#topInfo {
		background-image: url(/img/common/bg_c_01.png);
		background-repeat: repeat;
		background-position: center center;
		padding: 50px 0;
	}
	#topInfo .inner {
		width: 90%;
		margin: 0 auto;
	}
	#topInfo .hn {
		font-size: 2.6rem;
		text-align: center;
		padding-bottom: 20px;
		border-bottom: 1px solid #c9c9c9;
		margin-bottom: 30px;
	}
	#topInfo dl {
		padding: 0 15px;
		margin-bottom: 30px;
	}
	#topInfo dl dt {
		font-size: 1.8rem;
		margin-bottom: 5px;
	}
	#topInfo dl dd {
		font-size: 1.8rem;
		margin-bottom: 20px;
	}
	#topInfo .link {
		padding: 0 15px;
		text-align: right;
		margin-bottom: 30px;
	}
	#topInfo .link a {
		font-size: 1.8rem;
	}
	#topInfo .bnrList {
		text-align: center;
	}
	#topInfo .bnrList li {
		display: inline-block;
	}
	
	/* topContact */
	#topContact {
		background-color: #e0e0e0;
		padding: 50px 0;
	}
	#topContact .inner {
		width: 90%;
		margin: 0 auto;
	}
	#topContact .hn {
		font-size: 2.6rem;
		color: #fff;
		text-align: center;
		margin-bottom: 30px;
	}
	#topContact .txt {
		font-size: 1.8rem;
		color: #fff;
		text-align: center;
		margin-bottom: 30px;
	}
	#topContact .btn {
		text-align: center;
	}
	#topContact .btn a {
		display: inline-block;
		font-size: 1.8rem;
		color: #fff;
		text-align: center;
		text-decoration: none;
		padding: 10px 100px;
		background-color: #a08523;
		background-image: url(/img/common/ic_arrow_r.png);
		background-repeat: no-repeat;
		background-position: center right 15px;
	}
	
	/* topBnr */
	#topBnr {
		background-image: url(/img/common/bg_c_01.png);
		background-repeat: repeat;
		background-position: center center;
		padding: 50px 0;
	}
	#topBnr .inner {
		width: 86%;
		margin: 0 auto;
	}
	#topBnr ul {
	}
	#topBnr li {
	}
	#topBnr li:not(:first-of-type) {
		padding-top: 20px;
	}
	#topBnr li a {
		position: relative;
		display: block;
	}
	#topBnr li a img {
		width: 100%;
	}
	#topBnr li a dl {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		width: 96%;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		text-decoration: none;
	}
	#topBnr li a dl dt {
		font-size: 2.6rem;
		padding-bottom: 10px;
	}
	#topBnr li a dl dd {
		font-size: 1.8rem;
		line-height: 1.4;
	}
	#topBnr li a dl dd .btn {
		display: none;
	}
	
	/* topFoot */
	#topFoot {
		position: relative;
		background-image: url(/img/top/top_foot_bg.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		overflow: hidden;
	}
	#topFoot::before {
		position: relative;
		content: '';
		display: block;
		padding-top: 111.848958333%;
	}
	#topFoot .inner {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		height: 85%;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	#topFoot p {
		font-size: 2.2rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	}
}

/******************************************************
 PC
******************************************************/
@media print,
screen and (min-width: 769px) {
	/* topMain */
	#topMain {
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url(/img/top/top_main_bg.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		z-index: 1;
	}
	#topMain .imgLogo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		width: 75px;
		height: 286px;
		background-image: url(/img/common/img_logo.png);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		text-indent: -9999px;
	}
	
	/* topLead */
	#topLead {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 120px 0;
		background-image: url(/img/top/top_lead_bg.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		margin-bottom: 10px;
		white-space: nowrap;
		/*word-break: keep-all;
		overflow: hidden;*/
	}
	#topLead .inner {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	#topLead .hn {
		font-size: 2.8rem;
		font-weight: bold;
		padding-left: 70px;
	}
	#topLead p {
		font-size: 1.7rem;
		line-height: 3;
	}
	
	/* topIndexNav */
	#topIndexNav {
	}
	#topIndexNav .item a {
		position: relative;
		display: block;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		text-decoration: none;
		transition: all .5s;
	}
	#topIndexNav .item a::before {
		content: '';
		display: block;
		padding-top: 30.9444%;
	}
	#topIndexNav .item a:hover {
		opacity: .8;
	}
	#topIndexNav .item:not(:last-child) {
		margin-bottom: 10px;
	}
	#topIndexNav .item:nth-child(1) a { background-image: url(/img/top/index_nav_01.png);}
	#topIndexNav .item:nth-child(2) a { background-image: url(/img/top/index_nav_02.png);}
	#topIndexNav .item:nth-child(3) a { background-image: url(/img/top/index_nav_03.png);}
	#topIndexNav .item:nth-child(4) a { background-image: url(/img/top/index_nav_04.png);}
	#topIndexNav .item .hn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		font-size: 2.8rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		line-height: 1;
	}
	#topIndexNav .item .hn span {
		display: block;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 5.6rem;
		font-style: italic;
		letter-spacing: 5px;
		padding-bottom: 40px;
	}
	
	/* topgift */
	#topgiftNav {
		background-image: url(/img/common/bg_c_01.png);
		background-repeat: repeat;
		background-position: center center;
		background-size: cover;
	}
	#topgiftNav .item a {
		position: relative;
		display: block;
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;		
		text-decoration: none;
		transition: all .5s;
	}
	#topgiftNav .item a::before {
		content: '';
		display: block;
		padding-top: 24.9444%;
	}
	#topgiftNav .item a:hover {
		opacity: .8;
	}
	#topgiftNav .item:not(:last-child) {
		margin-bottom: 10px;
	}
	#topgiftNav .item:nth-child(1) a { background-image: url(/img/top/index_gift_01.png);}
	#topgiftNav .item .hn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		font-size: 2.8rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		line-height: 1;
	}
	#topgiftNav .item .hn span {
		display: block;
		font-family: 'Sawarabi Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "Noto Serif JP", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-size: 3.6rem;
		font-style: italic;
		letter-spacing: 5px;
	}
	
	/* topInfo */
	#topInfo {
		background-image: url(/img/common/bg_c_01.png);
		background-repeat: repeat;
		background-position: center center;
		background-size: cover;
		padding: 8% 0;
	}
	#topInfo .inner {
		width: 94%;
		max-width: 800px;
		margin: 0 auto;
	}
	#topInfo .hn {
		font-size: 3.4rem;
		text-align: center;
		padding-bottom: 50px;
		border-bottom: 1px solid #c9c9c9;
		margin-bottom: 30px;
	}
	#topInfo dl {
		margin-bottom: 20px;
		overflow: hidden;
	}
	#topInfo dl dt {
		float: left;
		margin-bottom: 20px;
	}
	#topInfo dl dd {
		padding-left: 7em;
		margin-bottom: 20px;
	}
	#topInfo .link {
		text-align: right;
		margin-bottom: 20px;
	}
	#topInfo .bnrList {
		text-align: center;
	}
	#topInfo .bnrList li {
		display: inline-block;
	}
	#topInfo .bnrList li a {
		transition: all .5s;
	}
	#topInfo .bnrList li a:hover {
		opacity: .8;
	}
	
	/* topContact */
	#topContact {
		background-color: #e0e0e0;
		padding: 6% 0;
	}
	#topContact .inner {
		width: 94%;
		max-width: 800px;
		margin: 0 auto;
	}
	#topContact .hn {
		font-size: 3.4rem;
		color: #fff;
		text-align: center;
		margin-bottom: 50px;
	}
	#topContact .txt {
		color: #fff;
		text-align: center;
		margin-bottom: 50px;
	}
	#topContact .btn {
		text-align: center;
	}
	#topContact .btn a {
		display: inline-block;
		font-size: 1.8rem;
		color: #fff;
		text-align: center;
		text-decoration: none;
		padding: 10px 100px;
		background-color: #a08523;
		background-image: url(/img/common/ic_arrow_r.png);
		background-repeat: no-repeat;
		background-position: center right 15px;
		transition: all .5s;
	}
	#topContact .btn a:hover {
		opacity: .8;
	}
	
	/* topBnr */
	#topBnr {
		background-image: url(/img/common/bg_c_01.png);
		background-repeat: repeat;
		background-position: center center;
		background-size: cover;
		padding: 8% 0;
	}
	#topBnr .inner {
		width: 94%;
		max-width: 1300px;
		margin: 0 auto;
	}
	#topBnr ul {
		text-align: center;
		overflow: hidden;
	}
	#topBnr li {
		display: inline-block;
		width: 50%;
	}
	#topBnr li:nth-child(odd) {
		padding-right: 0;
	}
	#topBnr li:nth-child(even) {
		padding-left: 1%;
	}
	#topBnr li a {
		position: relative;
		display: block;
		transition: all .5s;
	}
	#topBnr li a img {
		width: 100%;
	}
	#topBnr li a:hover {
		opacity: .8;
	}
	#topBnr li a dl {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		width: 96%;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		text-align: center;
		text-decoration: none;
	}
	#topBnr li a dl dt {
		font-size: 2.8rem;
		padding-bottom: 10px;
	}
	#topBnr li a dl dd {
		line-height: 1.2;
	}
	#topBnr li a dl dd .btn {
		display: inline-block;
		font-size: 1.8rem;
		color: #fff;
		text-align: center;
		text-decoration: none;
		padding: 10px 80px;
		border: 1px solid #fff;
		background-image: url(/img/common/ic_arrow_r.png);
		background-repeat: no-repeat;
		background-position: center right 15px;
		margin-top: 20px;
	}
	
	/* topFoot */
	#topFoot {
		position: relative;
		background-image: url(/img/top/top_foot_bg.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		overflow: hidden;
	}
	#topFoot::before {
		position: relative;
		content: '';
		display: block;
		padding-top: 60%;
		/*padding-top: 39.666666666%;*/
	}
	#topFoot .inner {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		height: 85%;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	#topFoot p {
		font-size: 1.9rem;
		color: #fff;
		text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
	}
}

@media only screen and (max-width: 1023px) {
	#topBnr li a dl dd .btn {
		display: none;
	}
}