@charset "utf-8";

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

	/* -----------------------------------------------------------------------------

	common

----------------------------------------------------------------------------- */
	html,
	body {
		width: 100%;
		height: 100%;
		background: #fff;
		color: #333;
	}

	.pc {
		display: none !important;
	}

	#contents_block {
		line-height: 1.6;
	}

	#contents_block #contentsWrap {
		overflow: hidden;
	}

	#contentsWrap img {
		vertical-align: bottom;
		width: 100%;
		height: auto;
	}

	/* mv
---------------------------------------------*/
	#mv {
		background: url(../img/bg_content.png);
	}

	#mv .inner {
		box-sizing: border-box;
		text-align: center;
		position: relative;
	}

	/* wave */
	#mv .bgWave {
		width: 100%;
		height: 200px;
		position: absolute;
		background: url(../img/img_mv_wave.png) repeat-x 0 top;
		bottom: -20px;
		z-index: 0;
	}

	/* gnav
---------------------------------------------*/
	#nav p {
		background-color: #dfd6b0;
	}

	#nav p a {
		display: inline-block;
		width: 84.3%;
	}

	#nav p span {
		display: inline-block;
		width: 15.7%;
	}

	#nav ul {
		display: none;
		border-top: 1px solid #b2ab8d;
	}

	#nav ul li a {
		display: block;
		font-size: 160%;
		line-height: 1.0;
		color: #fff;
		width: 100%;
		padding: 6% 4%;
		box-sizing: border-box;
		background-color: #dcb46e;
		border-top: 1px solid #e9e2c8;
		border-bottom: 1px solid #b2ab8d;
	}

	#nav ul li b,
	#nav ul li span {
		display: inline-block;
		vertical-align: middle
	}

	#nav ul li b {
		width: 97%;
	}

	#nav ul li span {
		width: 3%
	}

	/* share
---------------------------------------------*/
	#share {
		text-align: center;
		font-size: 0;
		background: url(../img/line_bnrArea.gif) repeat-x top center, #fff;
		padding: 8% 14%;
	}

	#share img {
		vertical-align: bottom;
		width: 100%;
		height: auto;
	}

	#share h2 {
		width: 29%;
		margin: 3% 0;
		float: left;
	}

	#share ul {
		margin: 0 0 0 34%;
	}

	#share ul li {
		width: 30%;
		float: left;
	}

	#share ul li+li {
		margin: 0 0 0 5%;
	}

	/* btnav
---------------------------------------------*/
	#btnav {
		padding-top: 22%;
		position: relative;
		background: #fff;
	}

	#btnav ul li a {
		display: block;
		font-size: 160%;
		line-height: 1.0;
		color: #fff;
		width: 100%;
		padding: 6% 4%;
		box-sizing: border-box;
		background-color: #dcb46e;
		border-top: 1px solid #e9e2c8;
		border-bottom: 1px solid #b2ab8d;
	}

	#btnav ul li b,
	#btnav ul li span {
		display: inline-block;
		vertical-align: middle
	}

	#btnav ul li b {
		width: 97%;
	}

	#btnav ul li span {
		width: 3%
	}

	/* pagetop */
	p.pagetop {
		width: 20%;
		position: fixed;
		bottom: 10px;
		left: 50%;
		margin-left: -10%;
		z-index: 9999;
		display: none;
	}

	p.pagetop.fixed {
		position: absolute;
		top: 0;
		bottom: inherit;
	}


	/* -----------------------------------------------------------------------------

	lower common

----------------------------------------------------------------------------- */
	.lower {
		/* background: url(../img/sp/bg_lower.png) center top repeat-y / 100% auto; */
	}

	.lower .inner {
		padding: 0 4%;
	}

	.lower h2 {
		text-align: center;
		margin: 0 0 5%;
		line-height: 1;
	}

	.lower .notes {
		font-size: 110%;
		text-indent: -1em;
		margin-left: 1em;
	}

	/* mv
---------------------------------------------*/
	.lower #mv {
		background: none;
	}

	.lower #mv .inner {
		padding: 0;
	}

	.lower #mv h1 {
		/* position: absolute;
	top: 20%;
	left: 50%; */
	}

	.lower #mv h1 span {
		display: block;
	}

	/* wave */
	.lower #mv .bgWave {
		bottom: -118px;
	}

	/* bnrArea
---------------------------------------------*/
	.lower .bnrArea {
		padding: 10% 4%;
		background: url(../img/sp/line_bnrArea.gif) repeat-x center top, #fff;
	}

	/*-----------------------------------------
	
	2021.06~

	-----------------------------------------*/
	/* 色変更 */

	#nav p {
		background-color: #5a2800;
	}

	/* 色変更 */
	#nav ul li a {
		background-color: #5a2800;
		border-top: none;
		border-bottom: 2px solid #724816;
	}

	/* 色変更 */
	#btnav ul li a {
		background-color: #5a2800;
		border-top: none;
		border-bottom: 2px solid #724816;
	}

	.inn#js-header__menu {
		background-color: rgb(244, 67, 54) !important;
		background-image: url(../template/images/btn_menu_02.png) !important;
	}

	.inn {
		display: block !important;
	}

	/* ヘッダー調整 */
	#header_glonavi {
		height: 78px;
	}

	#header_glonavi #header_toggle_menu {
		margin-top: 72px;
		width: 80vw;
	}

	#header_glonavi #header_glonavi_l button {
		width: 78px;
		height: 78px;
	}

	#header_glonavi #header_toggle_menu .nav__trigger01,
	#header_glonavi #header_toggle_menu .nav__trigger02 {
		padding: 30px 0 30px 45px;
		font-size: 22px;
		font-family: "游ゴシック",
			YuGothic,
			"ヒラギノ角ゴ ProN W3",
			"Hiragino Kaku Gothic ProN",
			"メイリオ",
			Meiryo,
			sans-serif !important;
	}

	#header_glonavi #header_toggle_menu .nav__trigger01:after {
		right: 40px !important;
		width: 32px !important;
		height: 32px !important;
		margin-top: -16px !important;
		border-right: 6px solid white;
		border-bottom: 6px solid white;
	}

	#header_glonavi #header_toggle_menu .nav--external:after {
		width: 38px !important;
		height: 32px !important;
		background-size: contain;
		margin-top: -12px;
		border: none;
	}

	#header_glonavi #header_glonavi_l .glico_header_logo {
		position: absolute;
		left: 0;
		right: 1px;
		bottom: 15px;
		margin: 0 auto;
		padding-left: 0;
		width: 78px;
		height: auto;
	}

	#header_glonavi #header_glonavi_r .header_socials {
		display: none !important;
	}

	#header_glonavi #header_toggle_menu .nav__list01 {
		top: 48px;
		width: 100%;
	}
}