@charset "utf-8";

.pc {  }
.sp { display: none; }

.inner { min-width: 1200px; max-width: 1500px; margin: 0 auto; }

header { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 10; }
header .flex {
	display: flex;
	justify-content: space-between; /* 左右の要素を均等配置 */
	align-items: center; /* 中央揃え */
	padding: 0 150px;
}
header nav { width: 100%; padding: 0 100px 0 0; }
header h1 { font-size: 13px; font-weight: bold; color: #122a88; text-align: center; padding: 0 0 5px; }
header ul { display: flex; align-items: center; justify-content: space-between; }
header ul li { padding: 0 10px; }


footer .footer { position: relative; background: url(../images/pc/footer/bg_footer.png); padding: 75px 0 22px; }
footer .footer picture, footer .footer img { display: block; width: 100%; height: auto; }
footer .footer a { display: block;}
footer .footer .fortop { position: absolute; top: 0; right: calc(102px + (127 - 102) * ((100vw - 1200px) / (1500 - 1200))); width: calc(178px + (224 - 178) * ((100vw - 1200px) / (1500 - 1200))); max-width: 224px; }
footer .footer .fortop img { display: block; width: 100%; height: auto;}
footer .footer h2 { width: calc(269px + (334 - 269) * ((100vw - 1200px) / (1500 - 1200))); max-width: 334px; margin: 0 auto 40px; }
footer .footer .flex { display: flex; justify-content: flex-end; align-items: flex-end; padding-right: calc(102px + (125 - 102) * ((100vw - 1200px) / (1500 - 1200))); }
footer .footer .flex .links { display: flex; align-items: center; padding-left: 35px; }
footer .footer .flex .left { padding-right: 25px; text-align: right; }
footer .footer .flex .left .tokusho { width: calc(180px + (223 - 180) * ((100vw - 1200px) / (1500 - 1200))); max-width: 223px; margin-bottom: 12px; margin-left: auto; }
footer .footer .flex .left .contact { width: calc(91px + (108 - 91) * ((100vw - 1200px) / (1500 - 1200))); max-width: 108px; margin-bottom: 4px; margin-left: auto; }
footer .footer .flex .instagram { width: calc(37px + (47 - 37) * ((100vw - 1200px) / (1500 - 1200))); max-width: 47px; }
footer .footer .flex .copy { width: calc(466px + (579 - 466) * ((100vw - 1200px) / (1500 - 1200))); max-width: 579px; }

@media (max-width: 1200px) {
	footer .footer .fortop { right: 102px; width: 178px; }
	footer .footer h2 { width: 269px; }
	footer .footer .flex { padding-right: 102px; }
	footer .footer .flex .links { padding-left: 25px; }
	footer .footer .flex .left { padding-right: 22px; }
	footer .footer .flex .left .tokusho { width: 180px; }
	footer .footer .flex .left .contact { width: 91px }
	footer .footer .flex .instagram { width: 37px; }
	footer .footer .flex .copy { width: 466px; }
}
@media (min-width: 1500px) {
	footer .footer .fortop { right: 127px; }
	footer .footer .flex { padding-right: 127px; }
}


main picture,main img { max-width: 100%; height: auto; display: block; }

#yogurt_btn,#gelato_btn { position: relative; }
#yogurt_btn .btn { position: absolute; top: 87%; left: 50%; margin-left: -310px; }
#gelato_btn .btn { position: absolute; top: 81%; left: 50%; margin-left: -310px; }

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

	.pc { display: none; }
	.sp { display: block; }

	.inner { min-width: 100%; max-width: 100%; margin: 0 auto; }

	header { display: none; }
	
	footer .footer { background: url(../images/sp/footer/bg_footer.png); padding: 14vw 5% 4vw 10%; }
	footer .footer .fortop { position: absolute; top: 0; right: 0; width: 30vw; height: auto; }
	footer .footer h2 { width: 45vw; margin-bottom: 11vw; }
	footer .footer .flex { flex-flow: column-reverse; align-items: flex-start; padding-right: 0; }
	footer .footer .flex .copy { width: 83vw; }
	footer .footer .flex .sp_flex { width: 100%; display: flex; justify-content: space-between;}
	footer .footer .flex .links { flex-flow: column-reverse; align-items: flex-end; padding-left: 0; }
	footer .footer .flex .left { padding-right: 0; text-align: right; }
	footer .footer .flex .left .tokusho { width: 30vw; margin-bottom: 3vw; }
	footer .footer .flex .left .contact { width: 15vw; margin-bottom: 5vw; }
	footer .footer .flex .instagram { width: 9vw; margin-bottom: 5vw; }
	
	
	
	#yogurt_btn .btn { top: 87%; left: 0; padding: 0 1rem;  margin-left: 0; }
	#gelato_btn .btn { top: 55%; left: 0; padding: 0 1rem;  margin-left: 0; }

}