@charset "UTF-8";
body, ul, li {
	margin: 0;
	padding: 0;
}

/*ーーーーーーーーーー
.header
ーーーーーーーーーーー*/
#head_wrap {
	top: -0px;
	position:fixed;
	width: 100%;
	margin: 0px auto 0;
	line-height: 1;
	z-index: 999;
	text-decoration: none;
}

#head_wrap a {
	text-decoration: none;
	font-size:120%;
}

#head_wrap .inner {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

#head_wrap .inner:after {
	content: "";
	clear: both;
	display: block;
}



#global-nav ul {
	list-style: none;
	font-size: 14px;
	display: inline-flex;
}


#head_wrap.fixed,
#head_wrap {
	height:66px;
}

.login #head_wrap.fixed,
.login #head_wrap {
	height:136px;
}

#global-nav ul {
	display: block;
	margin-right: 0px;
}

#head_wrap .logo {
	float: left;
	height: 66px;
}

#head_wrap .logo a{
	display:block;
	height: 66px;
	padding:0 1.5em;
	display:flex;
	align-items: center;
}

#global-nav ul li {
	padding: 0 30px;
}




#global-nav ul li a {
	padding: 0 5px;
	padding: 2px;
	transition: all .6s ease 0s;
	box-sizing: border-box;
	font-weight: 700;
}

/* Fixed */
#head_wrap.fixed {
	margin-top: 0;
	top: 0;
	position: fixed;
	transition: top 0.65s ease-in;
	-webkit-transition: top 0.65s ease-in;
	-moz-transition: top 0.65s ease-in;
	z-index: 9999;
}

#head_wrap.fixed .logo {
	/*font-size: 36px;*/
	color: #333;
}

#head_wrap.fixed #global-nav ul li a {
	color: #545454;
	padding: 0 2px;
}


/* mypage Button */
#global-nav ul li.mypage{
	display:block;
	margin-left:1em;
}

#global-nav ul li.mypage a{
	display:block;
	color:#fff !important;
	padding: 20px 10px 20px 3em !important;
	font-weight:700;
	position:relative;
	background-color:#00aa50;
	height:100%;
	border-radius:5px;
}

#global-nav ul li.mypage a:before{
	display:inline-block;
	position:absolute;
	top:50%;
	left:10px;
	width:2em;
	height:2em;
	content:"";
	background-image:url(../img/icon-mypage.svg);
	background-size:cover;
	transform: translate(-0%, -50%);
}


#head-console {
	display: none;
	width:calc(100% - 20px);
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
	z-index: 101;
}

#head-console #flexbox{
	display: flex;
	align-items:center;
}

#head-console #flexbox .item.first{
	/*何もしない：左に寄せる*/
}

#head-console #flexbox .item:nth-child(2){
	margin-left:auto;/*右側に押し出す*/
}

#head-console #flexbox li{
	width:34px;
	position:relative;
	margin:0 5px;
}

#head-console #flexbox li a{
	display:block;
	width:34px;
}

#head-console #flexbox li a img{
	display:block;
	width:100%;
}

#head-console #login{
	height:100%;
	/*margin-right:1em;*/
}

#head-console #logout{
	height:100%;
	margin-right:1em;
	display:none;
}


.login #head-console #login{
	display:none;
}
.login #head-console #logout{
	display:block;
}

#head-console #mypage{
	height:100%;
	/*margin-right:1em;*/
}
/*
#head-console #login:before,
#head-console #logout:before,
#head-console #mypage:before,
#head-console #menu:before{
	display:inline-block;
	white-space:nowrap;
	position:absolute;
	top:100%;
	left:50%;
	transform: translate(-50%, 50%);
	font-size:70%;
	color: #675553;
}


#head-console #login::before{
	content:"ログイン";
}
#head-console #logout::before{
	content:"ログアウト";
}

#head-console #mypage::before{
	content:"会員登録";
}

#head-console #menu::before{
	content:"Menu";
}
*/


/* Toggle Button */
#nav-toggle {
	width: 34px;
	height: 36px;
	height:34px;
	cursor: pointer;
	z-index: 101;
}

#nav-toggle div {
	position: relative;
	height:100%;
}

#head_wrap {
	top: 0;
	position: fixed;
	margin-top: 0;
	width: 100%;
	padding: 0;
	/* Fixed reset */
}

#head_wrap .inner {
	width: 100%;
	max-width:1280px;
	margin:0 auto;
	padding: 0;
}

#head_wrap .fixed {
	padding-top: 0;
	background: transparent;
	height:56px;
}

/*おすすめ*/
#recommend {
	display:none;
	width:100%;
	height:70px;
	padding:1em 0.5em 0;
	background: rgba(255, 255, 255, 1);
	z-index: 1000;
	position: relative;
	justify-content: space-around;
}

.login #recommend {
	display:flex;
}

#recommend > div.icon {
	width:56px;
	height:56px;
	padding:3px;
	border-radius:50%;
	background: rgb(210,167,73);
	background: linear-gradient(0deg, rgba(210,167,73,1) 0%, rgba(187,144,57,1) 10%, rgba(53,26,14,1) 50%, rgba(247,239,219,1) 55%, rgba(238,216,168,1) 60%, rgba(247,239,219,1) 100%);
}

#recommend > div.icon > div {
	border-radius:50%;
	overflow:hidden;
}

#recommend > div.text{
	display:table;
	width:calc(100% - 80px);
	height:56px;
	position:relative;
	background: rgb(255,190,120);
	background: linear-gradient(0deg, rgba(247,239,219,1) 0%, rgba(255,173,94,1) 50%, rgba(255,194,115,1) 51%, rgba(255,207,145,1) 89%);
	border:2px solid #ff863d;
	border-radius:100px;
	padding:0em 1em;
}

#recommend > div.text p{
	display:table-cell;
	width:100%;
	height:100%;
	vertical-align:middle;
}

#recommend > div.text p span{
	font-size:80%;
	color: #675553; 
	width: 100%;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	/* ブラウザがサポートしていない場合のフェールセーフ */
	max-height: 2.8em;
	line-height:1.4em;
}

#recommend > div.text::before{
	display:block;
	content:"";
	width:15px;
	height:15px;
	position:absolute;
	top:10px;
	left:0;
	transform: translate(-9px, -5px);
	background-image: url('../img/tuno.svg');
	background-position: center;
	background-size: contain;
}


/*ヘッダー*/

#mobile-head {
	width: 100%;
	min-width:375px;
	height: 66px;
	z-index: 300;
	position: relative;
}

#top #head_wrap .logo{
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-0%, -100%);
	transition : all 0.5s ease 0s;
}

#top #head_wrap.scrolled .logo{
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-0%, -0%);
}

#global-nav {
	
	/* 開いてないときは画面外に配置 *//*
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(0%, -100%);
	padding:66px 0;
	background-color:#fdfdfd;
	width: 100%;
	text-align: center;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 20%);
	*/
}

#global-nav {
	position: absolute;
	/* 開いてないときは画面外に配置 */
	top: -700px;
	padding:66px 0;
	background-color:#fdfdfd;
	width: 100%;
	text-align: center;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 20%);
}



#global-nav ul {
	list-style: none;
	position: static;
	right: 0;
	bottom: 0;
	margin-top: 10px;
}

#global-nav ul li {
	float: none;
	position: static;
}

#global-nav ul li:last-child {
	margin-bottom:0.5em;
}

#head_wrap #global-nav ul li a,
#head_wrap.fixed #global-nav ul li a {
	width: 100%;
	display: block;
	padding: 1.5em 0;
	/*border-bottom:1px solid #675553;*/
	position:relative;
}

#head_wrap #global-nav ul li a p,
#head_wrap.fixed #global-nav ul li a p {
	transition : all 0.5s ease 0s;
}

#head_wrap #global-nav ul li a:hover p,
#head_wrap.fixed #global-nav ul li a:hover p {
	letter-spacing:0.4em;
}


#head_wrap #global-nav ul li a::after,
#head_wrap.fixed #global-nav ul li a::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #000000;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
	transition: transform 0.3s;   /*変形の時間*/
}

#head_wrap #global-nav ul li a:hover::after,
#head_wrap.fixed #global-nav ul li a:hover::after {
transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}



#head_wrap #global-nav ul li:last-child a,
#head_wrap.fixed #global-nav ul li:last-child a {
	/*border-bottom:none;*/
}

#head_wrap #global-nav ul li a p,
#head_wrap.fixed #global-nav ul li a p {
	font-size:140%;
	margin-bottom:0.3em;
	letter-spacing:0.1em;
}

#global-nav ul li.mypage{
	display:none;
}

#head-console {
	display: block;
}

/* #nav-toggle 切り替えアニメーション */
#nav-toggle span {
	display: block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: #545454;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
	top: 10%;
	transform: translate(-0%, -0%);
}

#nav-toggle span:nth-child(2) {
	top:50%;
	transform: translate(-0%, -50%);
}

#nav-toggle span:nth-child(3) {
	top: 90%;
	transform: translate(-0%, -100%);
}

.open #nav-toggle span:nth-child(1) {
	top:50%;
	transform: translate(-0%, -50%) rotate(315deg);
}

.open #nav-toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}

.open #nav-toggle span:nth-child(3) {
	top:50%;
	transform: translate(-0%, -50%) rotate(-315deg);
}

/* #global-nav スライドアニメーション */
.open #global-nav {
	/* #global-nav top + #mobile-head height */
	transform: translateY(700px);
}

.login .open #global-nav {
	/* #global-nav top + #mobile-head height */
	transform: translateY(700px);
}
  

#menu1, #menu2, #menu3, #menu4, #menu5 {
  margin-top: 500px;
  padding-top: 130px;
}

#menu5 {
  padding-bottom: 100vh;
}