@charset "utf-8";
/* CSS Document */




/** ボタンの記述 全体に適応（各色指定は各ブランドCSSで）**/
/** SPボタンの記述 **/
.category_box{margin:30px 0;display: flex;flex-wrap: wrap;justify-content: center; align-items: stretch;}
.category_box>div{margin:2px 2px;text-align: center;padding: 10px 0;width:30%;width: calc(50% - 14px); /* margin padding分を引く */border:1px solid #014725;background:#014725;}
.category_list:nth-child(1n) {flex-grow:2;} .category_list:nth-child(2n) {flex-grow:2;} .category_list:nth-child(3n) {flex-grow:2;} .category_list:nth-child(4n) {flex-grow:2;}.category_list:nth-child(5n) {flex-grow:2;} .category_list:nth-child(6n) {flex-grow:2;}  
.category_box a{display: block;text-decoration: none;color: #FFF;font-weight: bold;font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.arrow_category{position: relative;display: inline-block;padding-right: 10px;text-decoration: none;}
.arrow_category:before{content: '';width: 6px;height: 6px;border: 0;border-top: solid 2px #FFF;border-right: solid 2px #FFF;position: absolute;top: 50%;left: 50%;margin-top: -8px;transform: rotate(45deg);}    
.category_box>div:hover {opacity: 0.8;transition: all 0.5s 0s ease;/*transitionの記述を追加*/}
/** PCボタンの記述 ***/
@media screen and (min-width: 601px) {   
.category_box{display:flex;flex-wrap: nowrap;width:100%;margin:20px 0;}
.category_box>div{width:50%;margin:0 1%;border:1px solid #014725;background:#014725;text-align: center;padding: 1% 0;}  
.arrow_category{position: relative;display: inline-block;padding-right: 10px;text-decoration: none;}
.arrow_category:before{content: '';width: 6px;height: 6px;border: 0;border-top: solid 2px #FFF;border-right: solid 2px #FFF;position: absolute;top: 50%;left: 50%;margin-top: -8px;transform: rotate(45deg);}}  


/** ボタンひとつ（各ブランドTOPに戻る） **/
/** SPボタンの記述 **/
.p_btn_one{display:inline;margin:30px 0;}
.p_btn{width:60%;margin:5px auto;border:1px solid #014725;background:#014725;text-align: center;padding: 1% 0;}
.p_btn a{display: block;text-decoration: none;color: #FFF;font-weight: bold;font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.arrow_sel{position: relative;display: inline-block;padding-right: 10px;text-decoration: none;}
.arrow_sel:before{content: '';width: 6px;height: 6px;border: 0;border-top: solid 2px #014725;border-right: solid 2px #014725;position: absolute;top: 50%;left: 50%;margin-top: -8px;transform: rotate(45deg);}         
/** PCボタンの記述 ***/
@media screen and (min-width: 601px) {  
.p_btn_one{margin: 40px auto;}
.p_btn{margin:30px auto;width:30%;border:1px solid #014725;background:#fff;color: #014725;text-align: center;padding: 1% 0;} 
.p_btn a{display: block;text-decoration: none;color: #014725;font-weight: bold;}}
.p_btn:hover {opacity: 0.8;transition: all 0.5s 0s ease;/*transitionの記述を追加*/}

/** ボタンひとつ（ブランドTOPページに戻るのみ）**/
/** SPボタンの記述 **/
.p_btn_t_top{display:inline;margin:30px 0;}
.p_btn_t{width:60%;margin:5px auto;border:1px solid #014725;background:#014725;text-align: center;padding: 1% 0;}
.p_btn_t a{display: block;text-decoration: none;color: #FFF;font-weight: bold;font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.arrow_t_sel{position: relative;display: inline-block;padding-right: 10px;text-decoration: none;}
.arrow_t_sel:before{content: '';width: 6px;height: 6px;border: 0;border-top: solid 2px #fff;border-right: solid 2px #fff;position: absolute;top: 50%;left: 50%;margin-top: -8px;transform: rotate(45deg);}         
/** PCボタンの記述 ***/
@media screen and (min-width: 601px) {  
.p_btn_t_top{margin: 40px auto;}
.p_btn_t{margin:30px auto;width:30%;border:1px solid #014725;background:#014725;color:#fff;text-align: center;padding: 1% 0;} 
.p_btn_t a{display: block;text-decoration: none;color: #fff;font-weight: bold;}}
.p_btn_t:hover {opacity: 0.8;transition: all 0.5s 0s ease;/*transitionの記述を追加*/} 




/**ここから各コラム**/
/********* 共通 *********/
.g_caption{
line-height: 1.3em; /* 文章の間隔指定 */
text-align: center; /* 文字位置指定 */
margin: 10px 0px;
font-size: 18px;
font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
@media screen and (min-width: 601px) {
.g_caption{
font-size: 20px;
}}
/********* 画像と文章の記述 *********/
.g_section{width: 100%;
margin: 0 auto;
margin-top: 50px;
}
.g_section img{
margin: 20px 0px;
}	
.g_txt{
margin: 10px 0px;
text-align: center; /* 文字位置指定 */
line-height: 1.8em;	/* 文章の間隔指定 */
}
@media screen and (min-width: 601px) {
.g_section{
width: 80%;
margin: 0 auto;
margin-top: 50px;
}
.g_txt{
font-size: 16px;
line-height: 1.8em;	/* 文章の間隔指定 */
}}
/********* 横並びの説明文記述 *********/
.g_container{
width: 80%;
text-align: center;
margin: 0 auto;
}
.row_wrap{
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
.img_wrap{
margin: 0 auto;
}
.info_wrap{
text-align: center;/* 両端揃え */
}
@media screen and (min-width: 601px) {
.g_container{
width: 720px;
margin: 0 auto;
}
.row_wrap{
display: flex;
margin: 40px auto;
align-items: center;
}
.img_wrap{
margin: 0 auto;
}	
.info_wrap{
width: 470px;
margin: 20px;
text-align: justify;/* 両端揃え */
text-justify: inter-ideograph;/* 両端揃え */
line-height: 1.8em;/* 文章の間隔指定 */
}}
/********* 縦並びの説明文記述 *********/
.g_vertical_container{
width: 80%;
text-align: center;
margin: 0 auto;
}
.g_vertical_caption{
width: 80%;
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
.g_vertical_caption img{
width: 50%;
margin: 0 auto;
}
@media screen and (min-width: 601px) {
.g_vertical_container{
width: 720px;
margin: 0 auto;
display: flex;
}
.g_vertical_caption{
width: 80%;
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
.g_vertical_caption img{
width: 100%;
margin: 0 auto;
}}

/* 各ページtopバナー */
.sp_img{display: block !important;margin: 0 auto;}
.pc_img{display: none !important;}
@media screen and (min-width: 601px) {
.sp_img{display: none !important;}	
.pc_img{display: block !important;margin: 0 auto;}
}
/** spヘッダーのアイコン表示 ***/
.sp_top_icon{display: block !important;margin: 10px auto;}
@media screen and (min-width: 601px) {
.sp_top_icon{display: none !important;}}


/**ここから各コンテンツ見出し****/
.sub_title{text-align: center; /* 文字位置指定 */margin: 50px 0 20px 0;/* 文字サイズ指定 */font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-size: 16px;}
/*PC用 601px以上の範囲に収めるデザインはこの中に記述*/
@media screen and (min-width: 601px) {
.sub_title{
font-size: 20px; /* 文字サイズ指定 */}}
/** カテゴリーの見出し ***/
.category_title{margin: 20px 0;font-weight: bold;font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-size: 14px;}
.category_sel{text-align: center; margin: 20px 0;font-size: 14px;font-weight: bold;font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
@media screen and (min-width: 601px) {
.category_title{text-align: initial; font-size: 23px;font-weight: bold; margin: 40px 0;padding-bottom: 1px;}
.category_sel{text-align: initial; font-size: 18px;font-weight: bold; margin: 40px 0;}}
.fs-pt-column__heading{font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-size: 12px;}
@media screen and (min-width: 601px) {
.fs-pt-column__heading{font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;font-size: 18px;}}




.top_bb {margin: 5px 0;text-align: center;}
@media screen and (max-width: 600px) {
.top_bb{margin: 5px -8px;}}


  /**ここからオフィシャル通販サイト**/
.shoplist{display: flex;padding: 0;margin: 0;list-style: none;flex-wrap: wrap;}
.shoplist li{/*追加*/width: 50%;}   
.shoplist li a{display: flex;justify-content: center;align-items: center;text-align: center;width: 100%;
padding: 4px; } 
.shoplist> a:hover {opacity: 0.8;transition: all 0.5s 0s ease;/*transitionの記述を追加*/}
/** PCボタンの記述 ***/
 
@media screen and (min-width: 601px) {  
.shoplist{display: flex;flex-wrap: nowrap;padding: 0;margin: 0;list-style: none;}
.shoplist li{display: flex;width: 100%;margin: 0;}
}