@charset "Shift-JIS";
/* 冬トレンドアイテム特集CSS */
@keyframes fadeIn {
		0% {opacity: 0}
		60% {opacity: 1}
	}

@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		60% {opacity: 1}
	}
/* ==========================================================================
スマホ・タブレット・パソコン 共通CSS
========================================================================== */
/* Common 見出し
----------------------------------------------------------------- */
.tab_wrap{width:500px; margin:80px auto;}
.tab_area{font-size:0; margin:0 10px;}
.tab_area label{width:150px; margin:0 5px; display:inline-block; padding:12px 0; color:#999; background:#ddd; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{opacity:0.5;}
.panel_area{background:#fff;}
.tab_panel{width:100%; padding:80px 0; display:none;}
.tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}

.tab_area label.active{background:#fff; color:#000;}
.tab_panel.active{display:block;}
/* スペース */
	.m10{
		margin-bottom: 10px;
	}
	.m20{
		margin-bottom: 20px;
	}
	.m30{
		margin-bottom: 30px;
	}
	.m40{
		margin-bottom: 40px;
	}
	.m50{
		margin-bottom: 50px;
	}
	.m60{
		margin-bottom: 60px;
	}

/* ==========================================================================
スマートフォン CSS
========================================================================== */
@media screen and (max-width:767px) {
  p {
    font-size: 0.9em;
    line-height: 1.5;
    word-break: break-all;
  }
  ul,ol,li {
    list-style-type: none;
  }

  /* 汎用 */
  .content img {
    /* display: block; */
    width: auto;
    max-width: 100%;
  }
  .content .wrap-box {
    margin: 0 auto;
    max-width: 400px;
  }
  .content .img-box {
    margin-top: 1rem;
  }

  /* 看板 */
  .kanban img {
    width: 100%;
  }
	
	.tab_content p.text{
		font-size: .9rem;
		margin-bottom: 1.5rem;
		line-height: 1.5em;
		padding: 10px;
		text-align: left;
		border: 1px #f1f1f1 solid;
		border-radius: 10px;
	}
	.tab_content p.text2{
		font-weight: 500;
		padding: 10px 10px 0;
		text-align: left;
		margin-bottom: -20px;
	}
	.tab_content p.text3{
		font-weight: 500;
		padding: 10px;
		text-align: center;
		margin: 2rem auto 0;
		color: #444;
		border: 2px #444 solid;
		border-radius: 30px;
		width: 250px;
	}
	.tab_content p.text4{
		font-weight: 500;
		padding: 10px;
		text-align: center;
		margin: 1rem auto 0;
		color: #444;
		border: 2px #444 solid;
		border-radius: 30px;
		width: 250px;
	}
	.l_area ul li,
	.m_area ul li{
		padding: 15px 10px 15px 40px;
		margin-bottom: -10px;
		background: #f1f1f1;
		border-radius: 10px;
		text-decoration: underline;
	}
	.l_area ul span.icon1 img,
	.l_area ul span.icon2 img,
	.l_area ul span.icon3 img,
	.l_area ul span.icon4 img,
	.l_area ul span.icon5 img,
	.l_area ul span.icon6 img{
		width: 25px;
		position: relative;
		top: 35px;
		left: 10px;
	}
	.m_area ul span.icon1 img,
	.m_area ul span.icon2 img,
	.m_area ul span.icon3 img,
	.m_area ul span.icon4 img,
	.m_area ul span.icon5 img,
	.m_area ul span.icon6 img{
		width: 25px;
		position: relative;
		top: 35px;
		left: 10px;
	}
	
/* タブ */
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  max-width: 750px;
  margin: 0 auto;}

.tab {
  border-bottom: 3px solid #68CFD9;
}

	.tab li {
	 width: calc(99%/3);
	  color: #9e9e9e;
	  float: left;
	  margin: 0 auto;
	  padding: 20px 0px;
		text-align: center;
	  background-color: #d9d9d9;
	  cursor: pointer;
	  list-style: none;
	  transition: .3s;
		border-right: 1px #f1f1f1 solid;
		line-height: 1.3em;
	}
	
	.tab li:last-child {
		width: 33%;
		border-right: 1px #d9d9d9 solid;
	}
	
.tab li.active {
  color: #fff;
  background: #68CFD9;
  cursor: auto;
}
 
.area .tab_content {
  display: none;
}
.area .show {
  display: block;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
	

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 10px 0;
  clear: both;
  overflow: hidden;
animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

/*選択されているタブのコンテンツのみを表示*/
#outdoor:checked ~ #outdoor_content,
#beauty:checked ~ #beauty_content,
#resort:checked ~ #resort_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #68CFD9;
  color: #fff;
}

  /* 見出し */
  .content .wrap-box h2 {
    margin-top: 2.5rem;
    width: 100%;
    height: 3rem;
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u40993151/pc/css/newlife/title-back-sp.jpg);
    text-align: center;
    font-size: 1.3rem;
    /* font-weight: 400; */
    line-height: 3.4rem;
	font-weight: 700;
	color: #444444;
  }
  .content .l_area h3 {
   font-size: 1.3rem;
	font-weight: 600;
	padding: 5px;
	line-height: 1.3em;
  }
	.content .m_area h3 {
   font-size: 1.3rem;
	font-weight: 600;
	padding: 5px;
	line-height: 1.3em;
  }
	.content .recommend_area h3 {
		font-size: 1.3rem;
		font-weight: 600;
		border-left: #FF6083 7px solid;
		padding: 15px 5px;
		background: #FCEAEE;
	}
	
	.l_area .ladies_icon{
		background: #FF6083;
		color: #fff;
		font-size: .7rem;
		padding: 5px;
		border-radius: 30px;
		line-height: 2.3em;
	}
	.m_area .mens_icon{
		background: #0388C8;
		color: #fff;
		font-size: .7rem;
		padding: 5px 16px;
		border-radius: 30px;
		line-height: 2.3em;
	}

  /* 横並びリスト */
  .content .wrap-box ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-between;
  }
  .content .wrap-box li {
    text-align: center;
  }

  /* ページ説明テキスト */
  .content .page-text {
    background: #f1f1f1;
  }
  .content .page-text p {
    margin: 0 auto;
    padding: 1.5rem 1rem;
  }

  /* キーワードメニュー */
  .content .keyword-menu {
    width: 100%;
    margin: 0 auto;
	text-align: center;
  }
  .keyword-menu li {
    width: 33%;
    width: -webkit-calc(100% / 3 - 1%);
    width: calc(100% / 3 - 1%);
	display: inline-block;
  }
	
	.keyword-menu .mens{
		color: #68acaf;
		font-size: 1.2em;
	}
	
	.keyword-menu .ladies{
		color: #dc8690;
		font-size: 1.5em;
	}
	
	.keyword-menu h3:before,
  .keyword-menu h3:after{
    content: '';
    position: absolute;
    top: 20%;
    display: inline-block;
    width: 0%;
    height: 10px;
    background-color: #f1f1f1;
  }

  /* ボタン */
  .content .button {
    margin-top: .5rem;
    font-size: .6rem;
  }
  .content .button a {
    display: block;
    padding: .4rem 0rem;
    border-radius: 20px;
    background: #ffadaf;
    line-height: 1.2;
    text-decoration: none;
  }
	
	.content .button_price {
    margin-top: 1.0rem;
    font-size: .9rem;
	max-width: 200px;
  }
	
	.content .button_price a {
    display: block;
    padding: 1.1rem 0;
    border-radius: 5px;
    background: #fff;
    line-height: 1.2;
    text-decoration: none;
  }
	
  .content .mens a {
    border: solid 3px #68acaf;
    color: #519191;
  }
  .content .ladys a {
    
    color: #ffffff;
  }
	.btn_area ul li{
		width: 75%;
		margin: 0 auto;
		padding: 1rem 0 0;
	}
	.btn_area li img{
		width: 100%;
	}


  /* 関連トピックス */
  .related-topics {
    margin: 1.5rem auto 0;
    padding: 1rem .5rem .5rem;
    border-radius: 5px;
    background: #f1f1f1;
    text-align: center;
  }
  .related-topics img {
    margin-top:1rem;
  }
  .related-topics p {
    margin-top:1rem;
  }
	.top_btn p{
		text-align: right;
		padding: 10px;
	}
}

/* ==========================================================================
タブレット CSS
========================================================================== */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* テキスト */
  .content .b-box {
    font-size: .9rem;
    line-height: 1.5;
  }
  .content .page-text {
    margin: 1.5rem auto 3rem;
    /* width: 770px; */
	padding: 0 10px;
  }
	.tab_content p.text{
		font-size: 1.1rem;
		margin-bottom: 1.5rem;
		line-height: 1.5em;
		padding: 10px;
		text-align: left;
	}
	
	.tab_content p.text2{
		font-weight: 500;
		padding: 10px 10px 5px;
		text-align: left;
	}
	.tab_content p.text3{
		font-weight: 500;
		padding: 10px;
		text-align: center;
		margin: 2rem auto 0;
		color: #444;
		border: 2px #444 solid;
		border-radius: 30px;
		width: 300px;
	}
	.tab_content p.text4{
		font-weight: 500;
		padding: 10px;
		text-align: center;
		margin: 1rem auto 0;
		color: #444;
		border: 2px #444 solid;
		border-radius: 30px;
		width: 300px;
	}
	.l_area ul li,
	.m_area ul li{
		padding: 15px 10px 15px 40px;
		margin-bottom: -10px;
		background: #f1f1f1;
		border-radius: 10px;
		text-decoration: underline;
	}
	.l_area ul span.icon1 img,
	.l_area ul span.icon2 img,
	.l_area ul span.icon3 img,
	.l_area ul span.icon4 img,
	.l_area ul span.icon5 img,
	.l_area ul span.icon6 img{
		width: 25px;
		position: relative;
		top: 35px;
		left: 10px;
	}
	.m_area ul span.icon1 img,
	.m_area ul span.icon2 img,
	.m_area ul span.icon3 img,
	.m_area ul span.icon4 img,
	.m_area ul span.icon5 img,
	.m_area ul span.icon6 img{
		width: 25px;
		position: relative;
		top: 35px;
		left: 10px;
	}

  /* 画像 */
  .content img {
    width: auto;
    max-width: 100%;
  }
	
/* タブ */
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  max-width: 750px;
  margin: 0 auto;
	}
	
.tab {
  border-bottom: 3px solid #68CFD9;
}

.tab li {
 width: calc(100%/3);
  color: #9e9e9e;
  float: left;
  margin: 0 auto;
  padding: 20px 0px;
text-align: center;
  background-color: #d9d9d9;
  cursor: pointer;
  list-style: none;
  transition: .3s;
}
.tab li.active {
  color: #fff;
  background: #68CFD9;
  cursor: auto;
}
 
.area .tab_content {
  display: none;
}
.area .show {
  display: block;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
	


/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
	animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
	
/*選択されているタブのコンテンツのみを表示*/
#outdoor:checked ~ #outdoor_content,
#beauty:checked ~ #beauty_content,
#resort:checked ~ #resort_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #68CFD9;
  color: #fff;
}

  /* 見出し */
  .content .wrap-box h2 {
    margin: 4rem auto 0;
    /* width: 787px; */
    height: 60px;
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u40993151/pc/css/../images/newlife/title-back.jpg);
    text-align: center;
    line-height: 65px;
    font-size: 1.5rem;
	font-weight: 700;
	color: #444444;
  }
  .content .related-topics h2 {
    text-align: center;
    font-size: 1.5rem;
  }
  .content .l_area h3 {
   font-size: 1.3rem;
	font-weight: 600;
	padding: 5px;
	line-height: 1.3em;
  }
	.content .m_area h3 {
   font-size: 1.3rem;
	font-weight: 600;
	padding: 5px;
	line-height: 1.3em;
  }
	.content .recommend_area h3 {
		font-size: 1.3rem;
		font-weight: 600;
		border-left: #FF6083 7px solid;
		padding: 15px 5px;
		background: #FCEAEE;
	}
	
	.l_area .ladies_icon{
		background: #FF6083;
		color: #fff;
		font-size: .7rem;
		padding: 5px;
		border-radius: 30px;
		line-height: 2.3em;
	}
	.m_area .mens_icon{
		background: #0388C8;
		color: #fff;
		font-size: .7rem;
		padding: 5px 16px;
		border-radius: 30px;
		line-height: 2.3em;
	}
	
  /* 汎用box */
  .content .wrap-box {
    margin: 0 auto;
  }
  .content .img-box {
    margin-top: 2rem;
  }
  .content .main-text {
    font-size: 1.2rem;
  }
  .content .sub-text {
    font-size: .8rem;
  }

  /* 横並びリスト */
  .content .wrap-box ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .content .wrap-box li {
    text-align: center;
  }


  /* キーワードメニュー */
  .content .keyword-menu {
    width: 720px;
    margin: 0 auto;
  }
  .content .keyword-menu li {
    position: relative;
  }
	
	.keyword-menu .mens{
		color: #68acaf;
		font-size: 1.5em;
	}
	
	.keyword-menu .ladies{
		color: #dc8690;
		font-size: 1.5em;
	}
	
  .keyword-menu li {
    width: 33%;
    width: -webkit-calc(90% / 3 - 1%);
    width: calc(90% / 3 - 1%);
	display: inline-block;
  }

  /* ボタン */
  .content .button {
    margin-top: .5rem;
    font-size: 1rem;
  }
  .content .button a {
    display: block;
    padding: .6rem .5rem;
    border-radius: 20px;
    background: #ffadaf;
    line-height: 1.2;
    text-decoration: none;
  }
	
	.content .button_price {
    margin-top: 1.5rem;
    font-size: 1.5rem;
	width: 350px;
  }
	
	.content .button_price a {
    display: block;
    padding: 1.3rem 0;
    border-radius: 10px;
    background: #dc8690;
    line-height: 1.2;
    text-decoration: none;
  }
	
  .content .mens a {
    border: solid 3px #68acaf;
    color: #519191;
  }
  .content .ladys a {
    color: #ffffff;
  }
  .content .mens a:hover {
    background: #eff5f5;
  }
  .content .ladys a:hover {
    background: #fff6f7;
  }
	.btn_area ul{
		text-align: center;
	}
	.btn_area ul li{
		display: inline-block;
		width: 45%;
		margin: 0 auto;
		padding: 1rem .5rem 0;
	}
	.btn_area li img{
		width: 100%;
	}

  /* 関連トピックス */
  .related-topics {
    margin: 4rem auto 0;
    padding: 2rem 0 3rem;
    border-radius: 5px;
    background: #f1f1f1;
    text-align: center;
  }
  .related-topics img {
    margin-top:1rem;
	max-width:620px;
  }
  .related-topics p {
    margin-top:1rem;
  }
	
	.top_btn p{
		padding: 20px;
		text-align: right;
	}

}

/* ==========================================================================
パソコン CSS
========================================================================== */
@media screen and (min-width: 992px) {
  /* テキスト */
  .content .b-box {
    font-size: .9rem;
    line-height: 1.5;
  }
  .content .page-text {
    margin: 1.5rem auto 3rem;
    width: 850px;
  }
	.tab_content p.text{
		font-size: .9rem;
		margin-bottom: 1.5rem;
		line-height: 1.5em;
		padding: 10px;
		text-align: left;
	}
	.tab_content p.text2{
		font-weight: 500;
		padding: 10px 10px 5px;
		text-align: left;
	}
	.tab_content p.text3{
		font-weight: 500;
		padding: 10px;
		text-align: center;
		margin: 2rem auto 0;
		color: #444;
		border: 2px #444 solid;
		border-radius: 30px;
		width: 300px;
	}
	.tab_content p.text4{
		font-weight: 500;
		padding: 10px;
		text-align: center;
		margin: 1rem auto 0;
		color: #444;
		border: 2px #444 solid;
		border-radius: 30px;
		width: 300px;
	}
	.l_area ul li,
	.m_area ul li{
		padding: 20px 10px 20px 43px;
		margin-bottom: -10px;
		background: #f1f1f1;
		border-radius: 10px;
		text-decoration: underline;
	}
	.l_area ul span.icon1 img,
	.l_area ul span.icon2 img,
	.l_area ul span.icon3 img,
	.l_area ul span.icon4 img,
	.l_area ul span.icon5 img,
	.l_area ul span.icon6 img{
		width: 25px;
		position: relative;
		top: 40px;
		left: 10px;
	}
	.m_area ul span.icon1 img,
	.m_area ul span.icon2 img,
	.m_area ul span.icon3 img,
	.m_area ul span.icon4 img,
	.m_area ul span.icon5 img,
	.m_area ul span.icon6 img{
		width: 25px;
		position: relative;
		top: 40px;
		left: 10px;
	}
	

  /* 画像 */
	
	.tab_content p img{
		width: 80%;
	}
	.tab_content p{
		text-align: center;
	}
	.recommend_area img{
		width: 95%;
	}
	
/* タブ */
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  max-width: 800px;
  margin: 0 auto;
	}

.tab {
  border-bottom: 3px solid #68CFD9;
}

.tab li {
 width: calc(100%/3);
  color: #9e9e9e;
  float: left;
  margin: 0 auto;
  padding: 20px 0px;
text-align: center;
  background-color: #d9d9d9;
  cursor: pointer;
  list-style: none;
  transition: .3s;
	font-size: 1.2rem;
}
.tab li.active {
  color: #fff;
  background: #68CFD9;
  cursor: auto;
}
 
.area .tab_content {
  display: none;
}
.area .show {
  display: block;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}


/*タブ切り替えの中身のスタイル*/
.tab_content {
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
	animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

  /* 見出し */
  .content .wrap-box h2 {
    margin: 4rem auto 0;
    /* width: 787px; */
    height: 60px;
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u40993151/pc/css/newlife/title-back.jpg);
    text-align: center;
    line-height: 65px;
    font-size: 1.8rem;
	font-weight: 700;
	color: #444444;
  }
  .content .related-topics h2 {
    text-align: center;
    font-size: 1.5rem;
  }
  .content .l_area h3 {
   font-size: 1.4rem;
	font-weight: 600;
	padding: 5px;
	line-height: 1.3em;
  }
	.content .m_area h3 {
   font-size: 1.4rem;
	font-weight: 600;
	padding: 5px;
	line-height: 1.3em;
  }
	.content .recommend_area h3 {
		font-size: 1.4rem;
		font-weight: 600;
		border-left: #FF6083 7px solid;
		padding: 15px 5px;
		background: #FCEAEE;
	}
	
	.l_area .ladies_icon{
		background: #FF6083;
		color: #fff;
		font-size: .7rem;
		padding: 5px;
		border-radius: 30px;
		line-height: 2.3em;
	}
	.m_area .mens_icon{
		background: #0388C8;
		color: #fff;
		font-size: .7rem;
		padding: 5px 16px;
		border-radius: 30px;
		line-height: 2.3em;
	}

  /* 汎用box */
  .content .wrap-box {
    margin: 0 auto;
  }
  .content .img-box {
    margin-top: 2rem;
  }
  .content .main-text {
    font-size: 1.2rem;
  }
  .content .sub-text {
    font-size: .8rem;
  }

  /* 横並びリスト */
  .content .wrap-box ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .content .wrap-box li {
    text-align: center;
  }

  /* キーワードメニュー */
  .content .keyword-menu {
    margin: 0 auto;
	text-align: center;
  }
	.keyword-menu .mens{
		color: #68acaf;
		font-size: 1.5em;
	}
	
	.keyword-menu .ladies{
		color: #dc8690;
		font-size: 1.5em;
	}
	
  .keyword-menu li {
    width: 33%;
    width: -webkit-calc(90% / 3 - 1%);
    width: calc(90% / 3 - 1%);
	display: inline-block;
  }
  

  /* ボタン */
  .content .button {
    margin-top: .5rem;
    font-size: .9rem;
  }
  .content .button a {
    display: block;
    padding: .5rem;
    border-radius: 20px;
    background: #fff;
    line-height: 1.2;
    text-decoration: none;
  }
	
	.content .button_price {
    margin-top: 1.5rem;
    font-size: 1.5rem;
	width: 350px;
  }
	
	.content .button_price a {
    display: block;
    padding: 1.3rem 0;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
	vertical-align: middle;
  }
	
  .content .mens a {
    border: solid 3px #68acaf;
    color: #519191;
  }
  .content .ladys a {
    background: #ffadaf;
    color: #ffffff;
  }
	.content .ladys{
		width: 95%;
	}
  .content .mens a:hover {
    opacity: 0.7;
  }
  .content .ladys a:hover {
	opacity: 0.7;
  }
	.btn_area ul{
		text-align: center;
	}
	.btn_area ul li{
		display: inline-block;
		width: 45%;
		margin: 0 auto;
		padding: 1rem .5rem 0;
	}
	.btn_area li img{
		width: 100%;
	}

  /* 関連トピックス */
  .related-topics {
    margin: 2rem auto 0;
    padding: 2rem 0 3rem;
    border-radius: 5px;
    background: #f1f1f1;
    text-align: center;
  }
  .related-topics img {
    margin-top:1rem;
	max-width:620px; 
  }
  .related-topics p {
    margin-top:.5rem;
  }
	
	.top_btn p{
		padding: 20px;
		text-align: right;
	}

}