@charset "UTF-8";

body {
  background-color: #fff;
}

.tooltip {
  color:#333745;
  text-decoration: underline dashed #333745;
}

a.tooltip:hover {
     background: #ffffff;     /* IE6以下で必要 */
     text-decoration: none;
}
a.tooltip span {
     display: none;
     padding: 8px 12px;
     font-size: 12px;
     margin-left: 8px;
     line-height: 1.6;
}
a.tooltip:hover span {
     display: inline;
     position: absolute;
     background-color: #FFF7EE;
     border: 1px solid #cccccc;
     color: #000000;
     width: 200px;     /* a.tooltip spanに指定すると、IE6以下でspanの領域でマウスが反応してしまう */
}
 
/* IE6以下にのみ適用 */
a.tooltip:hover span{
     width: 216px;
}
.article-page h1,
.info-top {
  line-height: 1.5;
  font-size: 20px;
}
@media screen and (max-width: 767px) {
.article-page h1,
.info-top {
  font-size: 19px;
}
}
.article-page h4 {
  width:48%;
  margin:0 auto 30px;
  text-align:center;
  background-color:#ffa500;
  color:white;
  font-size:20px;
  position: relative;
  padding: .5em .75em;
}
@media screen and (max-width: 767px) {
.article-page h4 {
    width: 96%;
    font-size: 18px;
}
}
.article-page h4::before,
.article-page h4::after {
  position: absolute;
  bottom: 8px;
  z-index: -1;
  content: '';
  width: 30%;
  height: 50%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
}
.article-page h4::before {
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  left: .3em;
}
.article-page h4::after {
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  right: .3em;
}
.staff-photo {
  padding: 6px;
  border: 6px solid #155473;
  background-color: #ffffff;
}
main.page-main.article-page article img.staff-photo.large-photo {
  width: 220px;
  border-radius: 60px;
}

.page-main.article-page .box.style2.text-center {
  padding: 20px;
  margin-bottom: 10px;
}
.page-main.article-page .box.style2.text-center h3 {
  font-size: 16px;
}
@media screen and (max-width: 991px) {
  .page-main.article-page .box.style2.text-center h3 {
    font-size: 18px;
  }
}
.page-main.article-page .text-center.bottom-space img {
  width: 70%;
  margin-top: 15px;
}
.page-main.article-page .text-center.bottom-space .container-flex img {
  width: 100%;
  margin-top: 15px;
}
@media screen and (min-width: 768px) {
  .page-main.article-page .text-center img.half-width {
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .page-main.article-page .text-center img.quarter-width {
    width: 25%;
  }
}
@media screen and (max-width: 991px) {
  .page-main.article-page .text-center.bottom-space img {
    width: 100%;
    margin-top: 5px;
  }
}
.article-page p.custom-color-alt {
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.8px;
  padding: 10px;
}
@media screen and (max-width: 767px) {
  .article-page p.custom-color-alt {
    width: 100%;
  }
}
.article-page p.custom-color-alt.center-block {
  margin: 30px auto;
}
@media screen and (max-width: 767px) {
.article-page h3 + p.custom-color-alt.center-block {
  margin-top: 10px;
}
}
.TableOfContents,
.TableOfConclusion {
  border:1px solid #333745;
  color:#333745;
  padding:15px 50px;
  display: inline-block;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
.TableOfContents,
.TableOfConclusion {
  padding:15px 20px;
}
}
.TableOfContents div a {
  color:#333745;
  cursor: hand;
  cursor:pointer;
}
.TableOfContents > div:first-child,
.TableOfConclusion > div:first-child {
  border-bottom:2px solid #155473;
  font-weight: bold;
  font-size: 28px;
}
.TableOfContents div:not(:first-child),
.TableOfConclusion > div:not(:first-child) {
  margin-top: 4px;
  text-align: left;
  font-size: 16px;
}
.TableOfContents div:nth-child(2),
.TableOfConclusion div:nth-child(2) {
  margin-top: 15px;
}
.TableOfContents.camp > div:first-child,
.TableOfConclusion.camp > div:first-child {
  border-bottom:2px solid #bd6d24;
  font-weight: bold;
  font-size: 28px;
}
@media screen and (max-width: 767px) {
.TableOfContents > div:first-child, 
.TableOfConclusion > div:first-child {
  font-size: 22px;
  margin-bottom: 15px;
}
}

.article-page h2 {
  border-bottom: 3px solid #155473;
  padding: 0 0 0 5px;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.4;
}
.article-page.camp h2 {
  border-bottom: none;
  padding: 10px 0 10px 5px;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.4;
	background-color: #000;
	color: #fff;
}
@media screen and (max-width: 767px) {
  .article-page h2 {
    font-size: 24px;
  }
}
.article-page h3 {
  font-size: 24px;
  line-height: 1.3;
  margin: 13px auto;
	width:80%;
}
@media screen and (max-width: 767px) {
.article-page h3 {
  font-size: 20px;
  margin-bottom: 5px;
}
}
.article-page h1~img {
  width: 80%;
}
.article-page h2 + img, 
.article-page h3 + img {
  width: 80%;
}
@media screen and (max-width: 767px) {
.article-page h2 + img, 
.article-page h3 + img {
  width: 100%;
}
}
.container-flex .pc2-sp1 {
  -ms-flex-basis: calc(50% - 10px);
  -webkit-flex-basis: calc(50% - 10px);
  flex-basis: calc(50% - 10px);
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  overflow: hidden;
}
@media screen and (max-width:767px) {
  .container-flex .pc2-sp1 {
  -ms-flex-basis: 96%;
  -webkit-flex-basis: 96%;
  flex-basis: 96%;
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 16px;
}
}
.container-flex .pc3-sp2 {
  -ms-flex-basis: calc(33.33% - 20px);
  -webkit-flex-basis: calc(33.33% - 20px);
  flex-basis: calc(33.33% - 20px);
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}
@media screen and (max-width:767px) {
  .container-flex .pc3-sp2 {
  -ms-flex-basis: calc(100% / 2 - 16px);
  -webkit-flex-basis: calc(100% / 2 - 16px);
  flex-basis: calc(100% / 2 - 16px);
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 16px;
}
}
.container-flex .pc3-sp1 {
  -ms-flex-basis: calc(100% / 3 - 20px);
  -webkit-flex-basis: calc(100% / 3 - 20px);
  flex-basis: calc(100% / 3 - 20px);
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}
@media screen and (max-width:767px) {
  .container-flex .pc3-sp1 {
  -ms-flex-basis: 96%;
  -webkit-flex-basis: 96%;
  flex-basis: 96%;
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 35px;
}
}
.container-flex .pc6-sp3 {
  -ms-flex-basis: calc(16.66% - 20px);
  -webkit-flex-basis: calc(16.66% - 20px);
  flex-basis: calc(16.66% - 20px);
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}
@media screen and (max-width:767px) {
  .container-flex .pc6-sp3 {
  -ms-flex-basis: calc(100% / 3 - 10px);
  -webkit-flex-basis: calc(100% / 3 - 10px);
  flex-basis: calc(100% / 3 - 10px);
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 20px;
}
}
.container-flex .pc5-sp2 {
  -ms-flex-basis: calc(20% - 20px);
  -webkit-flex-basis: calc(20% - 20px);
  flex-basis: calc(20% - 20px);
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}
@media screen and (max-width:767px) {
  .container-flex .pc5-sp2 {
  -ms-flex-basis: calc(100% / 2 - 16px);
  -webkit-flex-basis: calc(100% / 2 - 16px);
  flex-basis: calc(100% / 2 - 16px);
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 16px;
}
}

.container-flex .flexitem-pics {
  -ms-flex-basis: 50%;
  -webkit-flex-basis: 50%;
  flex-basis: 50%;
}

.container-flex .flexitem-text {
  -ms-flex-basis: 50%;
  -webkit-flex-basis: 50%;
  flex-basis: 50%;
  position: relative
}

.container-flex .flexitem-text p {
  color: #333745;
  text-align: left;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.8px;
  padding: 15px 15px 15px 30px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media screen and (max-width:767px) {
.container-flex .flexitem-text p {
  padding-top: 10px;
}
}
@media screen and (max-width:767px) {
  .container-flex .flexitem-pics,
  .container-flex .flexitem-text {
  position: static;
  -ms-flex-basis: 100%;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
}
.container-flex .flexitem-text p {
  padding: 5px;
  position: static;
  -webkit-transform: none;
  transform: none;
}
}

.article-page .article-page-genre {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width:767px) {
.article-page .article-page-genre {
  width: 96%;
}
}
.article-page-genre a img {
  width: 100%;
}
.article-page-genre p {
  margin-top: 10px;
  margin-bottom: 15px;
  color: #333745;
  font-size: 14px;
}
@media screen and (max-width:767px) {
.article-page-genre p {
  font-size: 12px;
}
}
.article-page i.icon.icon-checked {
  color: #ff3333;
}
.article-page .pc3-sp1 p.brand,
.article-page .pc6-sp3 p.brand,
.article-page .pc5-sp2 p.brand {
  margin:10px auto 0px;
  font-size:10px;
  font-weight:bold;
}
@media screen and (max-width:767px) {
.article-page .pc6-sp3 p.brand,
.article-page .pc5-sp2 p.brand {
  font-size: 12px;
}
.article-page .pc3-sp1 p.brand {
  font-size: 14px;
}
}
.article-page .pc3-sp1 p.itemname {
  margin:5px 0;
  font-size:16px;
  font-weight:bold;
  color:#333745;
}
.article-page .pc6-sp3 p.itemname,
.article-page .pc5-sp2 p.itemname {
  margin:0px auto 5px;
  color:#333745;
  font-size: 12px;
  font-weight:bold;
}
.article-page .pc5-sp2 div.itemprice {
    margin: 10px 0 0 0;
    text-align: center;
    font-size: 24px;
    color: #333745;
}
/* 商品画像 */
.article-page .pc3-sp1 .rec-items-pic {
  position: relative;
}
.article-page .pc3-sp1 .rec-items-pic img,
.article-page .pc5-sp2 .rec-items-pic img {
  width: 100%;
}
.article-page .pc3-sp1 .rec-items-pic .rec-mark {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color:#f60;
  padding:6px 10px 5px 15px;
  color:white;
}
/* スターレイティング */
.article-page .pc3-sp1 .container-flex > div.col-xs-8.col-sm-8.col-md-8 {
  padding:10px;
}
.article-page .pc3-sp1 .product-item-rating {
  margin-top: 3px;
}
.article-page .pc3-sp1 .product-item-rating * {
  font-size: 14px;
}
.article-page .pc6-sp3 .product-item-rating {
  margin-bottom: 10px;
  text-align: center;
}
.article-page .pc5-sp2 .product-item-rating {
  font-size: 14px;
  text-align: right;
}
/* 商品説明 */
.article-page .pc3-sp1 .container-flex + p {
  margin:10px 0;
  letter-spacing: 0.8px;
  color:#333745;
  font-size:14px;
  line-height:24px;
}
/* 商品ページリンク部分 */
.article-page .pc3-sp1 > a > div,
.article-page .pc5-sp2 > a > div{
  text-decoration:underline;
  color:#333745;
  text-align:center;
}
.article-page .pc3-sp1 > a > div > i,
.article-page .pc5-sp2 > a > div > i{
  padding-right:10px;
}
.article-page .pc6-sp3 > a > div {
  text-decoration:underline;
  color:#333745;
  text-align:center;
  font-size:15px;
}
.article-page .pc6-sp3 > a > div > i {
  padding-right:5px;
}
/* 次の記事へ */
.other-topic {
  width:80%;
  margin:0 auto;
  padding:14px;
  background-color: white;
  border-radius: 60px;
  margin-bottom:30px;
  background-color:#91dbff;
}
.other-topic div:first-child img {
  width:100%;
  padding: 6px;
  border: 6px solid #155473;
  background-color: white;
  border-radius: 60px;
  margin-right:15px;
}
.other-topic div:first-child {
    -ms-flex-basis: 220px;
    -webkit-flex-basis: 220px;
    flex-basis: 220px;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
}
.other-topic div:last-child {
  -ms-flex-basis: calc(100% - 300px);
  -webkit-flex-basis: calc(100% - 300px);
  flex-basis: calc(100% - 300px);
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
  color:#333745;
  font-size:20px;
}
@media screen and (min-width:768px) {
.other-topic div:last-child {
  position: relative;
}
.other-topic div:last-child p {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
}
.other-topic-o {
  width:80%;
  margin:0 auto;
  padding:14px;
  background-color: white;
  border-radius: 60px;
  margin-bottom:30px;
  background-color:#efd0ac;
}
.other-topic-o div:first-child img {
  width:100%;
  padding: 6px;
  border: 6px solid #7c2c00;
  background-color: white;
  border-radius: 60px;
  margin-right:15px;
}
.other-topic-o div:first-child {
    -ms-flex-basis: 220px;
    -webkit-flex-basis: 220px;
    flex-basis: 220px;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
}
.other-topic-o div:last-child {
  -ms-flex-basis: calc(100% - 300px);
  -webkit-flex-basis: calc(100% - 300px);
  flex-basis: calc(100% - 300px);
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
  color:#333745;
  font-size:20px;
}
@media screen and (min-width:768px) {
.other-topic-o div:last-child {
  position: relative;
}
.other-topic-o div:last-child p {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
}
@media screen and (max-width:767px) {
.other-topic div:first-child,
.other-topic-o div:first-child {
  -ms-flex-basis: 100%;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 15px;
}
.other-topic div:last-child,
.other-topic-o div:last-child {
  -ms-flex-basis: 100%;
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
}
.other-topic.container-flex a,
.other-topic-o.container-flex a {
  color: #333745;
}
/* 補足説明のリンク */
.remarks > p {
  width:78%;
  margin-bottom:10px;
  letter-spacing: 0.8px;
  font-size:16px;
}
.remarks > .container-flex {
  width:78%;
  margin:0 auto;
  border:1px solid #333745;
}
@media screen and (max-width:767px) {
  .remarks > p,
  .remarks > .container-flex {
     width: 100%;
}
}
.remarks > .container-flex div:first-child {
  -ms-flex-basis: calc(15% - 10px);
  -webkit-flex-basis: calc(15% - 10px);
  flex-basis: calc(15% - 10px);
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.remarks > .container-flex div:first-child a {
  position: relative;
}
.remarks > .container-flex div:first-child img {
  width: 100%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.remarks > .container-flex div:last-child {
  -ms-flex-basis: 80%;
  -webkit-flex-basis: 80%;
  flex-basis: 80%;
  padding-left: 15px;
}
.remarks>.container-flex div:last-child p {
  padding: 10px;
  color: #333745;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.remarks>.container-flex div:last-child a {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (max-width:767px) {
.remarks>.container-flex div:first-child {
  -ms-flex-basis: calc(30% - 10px);
  -webkit-flex-basis: calc(30% - 10px);
  flex-basis: calc(30% - 10px);
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.remarks>.container-flex div:last-child {
  -ms-flex-basis: 70%;
  -webkit-flex-basis: 70%;
  flex-basis: 70%;
  padding-left: 5px;
}

.remarks>.container-flex div:last-child p {
  font-size: 15px;
}
}
@media screen and (max-width:767px) {
.remarks > p {
  font-size: 12px;
}
}

.item-btn {
width: 50%;
background-color: #7c2c00;
color: #fff;
margin: 0 auto;
font-size: 20px;
}
.list-btn {
width: 50%;
/*background-color: #ff0600;*/
color: #fff;
margin: 0 auto 30px;
font-size: 20px;
}
.item-btn p,
.list-btn p {
padding:20px 8px;
}
.item-btn a,
.item-btn a:hover,
.list-btn a,
.list-btn a:hover {
color:#fff;
}
.tarp-list {
margin:20px auto 0px;
width:80%;
}
.tarp-shape {
font-size: 20px;
font-weight:bold;
}
@media screen and (max-width:767px) {
.item-btn,
.list-btn {
width: 100%;
font-size:4vw;
}
.item-btn p,
.list-btn p {
padding:14px 8px;
}
.tarp-list {
margin-top:20px;
}
.tarp-shape {
font-size:4vw;
}
}

/* 固定ナビゲーション */
#fixed-navigation {	
	position: fixed;
	bottom: 10px;
	left: 5px;
	right: 5px;
	top: auto;
	border-radius: 35px;
	height: 70px;
	z-index: 10;
	padding: 5px 15px;
	width: auto;
	background: #002466;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
#menu-icon {
	padding: 0 5px;
}
#menu-icon a {
	-ms-flex-basis: calc(50% - 10px);
	-webkit-flex-basis: calc(50% - 10px);
	flex-basis: calc(50% - 10px);
	margin-right: 5px;
	margin-left: 5px;
	color: #000;
}
#menu-icon a:hover {
	color: #f82e56;
}
#menu-icon a i {
	font-size: 36px;
}
@media screen and (max-width: 991px) {
	#fixed-logo {
		display: none;
	}
}
#menu-icon a p {
	font-size: 10px;
}
@media screen and (min-width: 992px){
	#fixed-navigation {
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		border-radius: 0;
		justify-content: space-between;
		height: 76px;
	}
	#menu-icon {
		-ms-flex-basis: calc(100% - 320px);
		-webkit-flex-basis: calc(100% - 320px);
		flex-basis: calc(100% - 320px);
		margin-left: 20px;
		max-width: 600px;
	}
	#menu-icon a div,
	#menu-icon a p {
		display: inline-block;
	}
	#menu-icon a p {
		font-size: 14px;
		line-height: 50px;
		vertical-align: top;
	}
	#menu-icon a i {
		line-height: 50px;
	}
}

.pc-nav {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 100px;
	z-index:100;
}
.pc-nav img {
	width: 100px;
	margin-top: 10px;
}

.bg-or {
	background-color: #f08300;
}
.bg-bl {
	background-color: #000000;
}
.article-page .bg-or p.custom-color-alt,
.article-page .bg-bl p.custom-color-alt {
	color: #fff;
}