@charset "utf-8";
/* CSS for Responsive */

/*========================================
	1280px以下
========================================*/
@media only screen and (max-width: 1280px) {

	#safety{
		background: url(../img/contents2_bg02.png) no-repeat left -20% top 0,
url(../img/contents2_bg03.png) no-repeat right -20% bottom 0,
url(../img/contents2_bg01.png) no-repeat left #fff;
	}
	
	.lineup_pic{
		margin-left: 20px;
		margin-right: 20px;
	}
	.lineup_pic figure{
		position: relative;
		width: 100%;
	}
	.lineup_pic figure::bafore{
		content: "";
		display: block;
		padding-top: 58.0645161%;
	}
	.lineup_pic figure img{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		object-fit: cover;
	}

	.lineup-inner figure{
		width: 450px;
	}
	.lineup-inner .txt{
		width: calc(100% - 450px);
	}

	#fixedbanner{
		width: calc(100% - 64px);
	}
	#fixedbanner a{
		background: url(../img/bg_fixedbanner.png) no-repeat left 100% top 50% / auto 100%;
		height: 64px;
	}
	#fixedbanner a::before {
		background: url(../img/fixedbanner_txt02.png) no-repeat center / auto 100%;
		width: calc(164px / 1.5);
		height: calc(72px / 1.5);
	}

	#pagetop{
		height: 64px;
	}
	#pagetop img{
		width: auto;
		height: 100%;
	}

	#footer{
		padding-bottom: 64px;
	}
	
} /* /@media */

/*========================================
	960px以下
========================================*/
@media only screen and (max-width: 960px) {
	
	#header nav ul{
		flex-wrap: wrap;
		gap: 20px;
	}
	#header nav ul li{
		width: calc(50% - 20px);
		border: 1px solid #fff;
		padding: .75em 1.25em;
	}

	#hayawari .inner{
		font-size: 2rem;
	}
	#hayawari .fs-large{
		font-size: 3rem;
	}
	#hayawari .fc-orange{
		font-size: 4rem;
	}
	#hayawari .present img{
		width: 80px;
		height: 80px;
	}

	#about{
		font-size: 2rem;
	}
	#about .fs-large {
		font-size: 3rem;
	}
	#about .fs-midium{
		font-size: 2rem;
	}

	#safety{
		background: url(../img/contents2_bg02.png) no-repeat left -5% top 0 / 40% auto,
url(../img/contents2_bg03.png) no-repeat right -5% bottom 0 / 40% auto,
url(../img/contents2_bg01.png) no-repeat left #fff;
		padding: 100px 0;
		font-size: 2rem;
	}
	.seizou-upper {
		background: url(../img/contents4_pic01.jpg) no-repeat top center / cover;
		padding-top: 160px;
	}

	.select-inner{
		flex-direction: column;
	}
	.select-inner > div{
		width: 100%;
	}
	.select-inner h4{
		font-size: 1.8rem;
	}
	.select-inner ul{
		font-size: 1.4rem;
	}

	.slick_lineup .arrow_prev,
	.slick_lineup .arrow_next{
		background: #fff;
		padding: 10px;
	}
	.slick_lineup .arrow_prev::before,
	.slick_lineup .arrow_next::after{
		width: 24px;
		height: 24px;
	}

	.lineup-inner figure{
		width: 45%;
	}
	.lineup-inner .txt{
		width: calc(100% - 45%);
	}
	
	#fixedbanner a{
		background: none;
	}
	
} /* /@media */

/*========================================
	520px以下
========================================*/
@media only screen and (max-width: 520px) {
	
	#header nav ul{
		gap: 10px;
	}
	#header nav ul li{
		padding: .25em .5em;
		font-size: 1.4rem;
	}

	br.sp{
		display: block;
	}
	br.pc{
		display: none;
	}
	#hayawari .inner{
		background: url(../img/discount.png) no-repeat left top / 25% auto;
	}
	#hayawari .present{
		flex-direction: column-reverse;
		gap: 20px;
		padding: 0 20px;
	}
	#hayawari .present img{
		width: 160px;
		height: 160px;
	}

	#about{
		font-size: 1.6rem;
		background: url(../img/contents1_bg01.png) no-repeat right / auto 100%, 
url(../img/contents1_bg02.jpg) no-repeat left bottom / 100% auto #1c1c1c;
	}
	#about .outer{
		margin-left: 20px;
		margin-right: 20px;
	}
	#about .fs-large{
		font-size: 2.2rem;
	}
	#about .inner{
		flex-direction: column;
		padding: 40px;
	}
	#about .inner img{
		width: 65%;
		height: auto;
	}
	#about .bottom{
		padding: 60px 20px;
	}

	#safety{
		font-size: 1.6rem;
		background: url(../img/contents2_bg02.png) no-repeat left -5% top 0 / 40% auto, 
url(../img/contents2_bg03.png) no-repeat right -5% bottom 0 / 40% auto, 
url(../img/contents2_bg01.png) no-repeat left / auto 100% #fff;
	}
	.listhead02{
		padding: .5em;
		margin-left: 20px;
		margin-right: 20px;
		font-size: 1.6rem;
		gap: .25em;
	}
	.listhead02::before{
		display: none;
	}

	#reason h2{
		font-size: 3rem;
	}
	#reason > p img{
		width: 45%;
		height: auto;
	}
	#reason .fs-large{
		font-size: 4rem;
	}
	.reasonlist{
		margin-left: 20px;
		margin-right: 20px;
	}
	.reasonlist li{
		font-size: 1.6rem;
		padding-left: 100px;
	}
	.reasonlist li:nth-child(1):before{
		background: url(../img/contents3_pic02.png) no-repeat center / cover;
		width: calc(118px / 1.5);
		height: calc(98px / 1.5);
		left: 10px;
	}
	.reasonlist li:nth-child(2):before{
		background: url(../img/contents3_pic03.png) no-repeat center / cover;
		width: calc(118px / 1.5);
		height: calc(98px / 1.5);
		left: 10px;
	}
	.reasonlist li:nth-child(3):before{
		background: url(../img/contents3_pic04.png) no-repeat center / cover;
		width: calc(118px / 1.5);
		height: calc(98px / 1.5);
		left: 10px;
	}
	.reasonlist li:nth-child(4):before{
		background: url(../img/contents3_pic05.png) no-repeat center / cover;
		width: calc(118px / 1.5);
		height: calc(98px / 1.5);
		left: 10px;
	}

	.seizou-upper{
		padding-top: 96px;
	}
	#seizou{
		text-align: left;
	}
	#seizou h2{
		font-size: 3rem;
	}
	#seizou p{
		font-size: 1.6rem;
		text-align: justify;
	}

	#lineup .head{
		background: url(../img/contents5_bg02.png) no-repeat top right #1c1c1c;
	}
	#lineup .head h2 span{
		font-size: 6rem;
	}

	.lineup-notice span{
		text-align: center;
		font-size: 1.6rem;
	}
	.lineup-notice span::before, .lineup-notice span::after{
		display: none;
	}

	.lineup-pic{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.slick_lineup .arrow_prev{
		padding: 20px 0 20px 15px;
		top: 40%;
	}
	.slick_lineup .arrow_next{
		padding: 20px 15px 20px 0;
		top: 40%;
	}
	.slick_lineup .arrow_prev span,
	.slick_lineup .arrow_next span{
		display: none;
	}

	.lineup_pic{
		position: static;
		display: flex;
		flex-direction: column;
		height: auto;
	}
	.lineup_pic .name{
		width: 100%;
		height: auto;
		display: block;
		position: static;
		order: 0;
		padding: 1rem 0 2rem;
	}
	.lineup_pic .name div{
		position: relative;
	}
	.lineup_pic .sinakazu{
		top: 20px;
		left: 30px;
	}
	.lineup_pic .name .sub{
		font-size: 1.6rem;
	}
	.lineup_pic .name h3{
		font-size: 4rem;
	}
	.lineup_pic .name h3 span{
		font-size: 1.3rem;
	}
	.lineup_pic .cap{
		display: block;
		position: static;
		order: 2;
		width: 100%;
		height: auto;
		background: none;
		padding: 20px 0 0 0;
		color: #1c1c1c;
		justify-content: flex-start;
		align-items: flex-start;
		text-align: left;
	}
	.lineup_pic .cap .souryo{
		color: #fff;
	}
	.lineup_pic .cap .price{
		border-color: #1c1c1c;
	}
	.lineup_pic figure{
		position: static;
		order: 1;
		height: auto;
	}
	.lineup_pic figure img{
		position: static;
		width: 100%;
		height: auto;
	}
	.back-selectmenu{
		text-align: center;
	}

	.lineup-title{
		font-size: 3rem;
	}

	.slick_lineup .arrow_prev{
		left: 10px;
	}
	.slick_lineup .arrow_next{
		right: 10px;
	}

	.lineup-inner{
		flex-direction: column;
	}
	.lineup-inner figure{
		width: 100%;
	}
	.lineup-inner .txt{
		width: 100%;
		padding: 2em;
	}

	#haisou h2{
		font-size: 3rem;
	}

	#haisou .inner{
		gap: 10px;
	}
	#haisou .inner p{
		font-size: 1.6rem;
		width: calc(100% - 48px - 10px);
	}
	#haisou .btn-order a{
		font-size: 1.8rem;
		gap: .5em;
	}

	#footer .container{
		flex-direction: column;
	}
	.f_guide{
		width: 100%;
		padding: 0 20px;
	}

	.f_info .flex-box{
		flex-direction: column;
		gap: 20px;
	}
	.f_info address{
		text-align: center;
	}
	.btn-backtohome{
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
	.btn-backtohome a{
		width: 100%;
		text-align: center;
	}

	#fixedbanner a{
		padding-left: 5px;
		padding-right: 15px;
	}
	#fixedbanner img{
		width: calc(100% - 4% - (164px / 1.5));
	}

}