@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/


/**********************************
 * -2019.11.16追加(YONE)-
 * SANGO用商品紹介パネル。
 **********************************/
 .c-panel{
	border:1px solid #e7e7e7;
	border-radius:3px;
	box-shadow:none;
	padding:30px;
	position:relative;
	padding-bottom: 7px;
}
.c-panel_header{
	display: flex;
}
.c-panel_left{
	margin-bottom: 20px;
}
.c-panel_right{
	min-width:250px;
	padding-left:1em;
	margin-bottom: 20px;
}
.c-panel_footer{
}

/* 画像側 */
img.c-slider_body{
	object-fit:contain;
	margin-bottom: 0px;
}

/* ボタン側 */
p.c-panel_heading {
	margin-top: 1em;
	margin-left: 0em;
	margin-bottom: 5px;
	font-size: 20px;
	line-height: 1.2;
	font-weight:normal;
	background:none;
	padding:0;
/* 	font-family:"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; */
	position: relative;
}

.c-panel_heading:before {
   display: inline-block;
   content: "";
	position: absolute;
   width: 8px;
   height: 100%;
   margin-left: -.7em;
   border-radius: 3.5px;
   background-color: #458500;
}

.c-panel_sub-text{
	display:block;
	font-size: 13px;
	line-height: 1;
	margin-bottom: 5px
}

p.cpanel_price{
	margin:0 0 0 0;
}

.u-font-xl{
	font-size:18px;
/* 	font-family:"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; */
}

.u-font-md{
	font-size:14px;
/* 	font-family:"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; */
}

ul.c-panel_buttons{
	list-style-type: none;
	margin-bottom: 0;
   padding: 0;
   border: none;
}

ul.c-panel_buttons li{
	padding-left:0em
}

ul.c-panel_buttons li:before{
	content:none;
}

.c-btn-green{
	display:block;
	padding: 5px 10px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	background-color: #f39800; /*ボタン色*/
	border-bottom: solid 6px #ec6c00; /*下線色*/
	border-radius: 3px;
	font-size: 16px;
	margin-top: 0;
	transform: translateY(0);
}

.c-btn-green:hover{
	background-color: #f9c500;/*ボタン色*/
	border-bottom: solid 6px #f39800; /*下線色*/
	color: white;
	text-decoration: none;
}

.c-btn-green:active{
	margin-top: 6px;
	border-bottom: solid 0px #f39800;
	-webkit-transform: translateY(6px);
	transform: translateY(6px);
}

/* 説明部 */
.c-panel_footer p{
	line-height: 1.5;
	margin-bottom: 20px;
}

.c-heading-catch{
	border-bottom: solid 3px #458500;
	position: relative;
	display: inline-block;
	margin-top: 7px;
	margin-bottom: 7px;
	font-size: 20px;
	font-weight: bold;
}

/* SANGO用商品紹介パネル（SP時） */
@media only screen and (max-width: 767px) {
	
	/*stickyを使うのでoverflow:visibleに変更*/
	body {
		overflow-x: visible;
	}
	.single .entry-content, .page .entry-content {
		overflow: visible;
	}
	#container {
		overflow: visible;
	}
	#main {
		overflow: visible;	
	}
	#inner-content {
		overflow: visible;			
	}
	
	/* 	sticky-header部 */
	.p-item-part_header {
		background-color: rgba(250,250,250,0.93);
		-webkit-box-shadow: 0 2px 5px -3px #cfcfcf;
		box-shadow: 0 2px 5px -3px #cfcfcf;
		left: 0;
		padding: 5px 15px;
		position: -webkit-sticky;
		position: sticky;
		overflow-anchor: none;
		-webkit-transform: translateZ(0);
		top: 0;
		z-index: 1000;
		font-size: 16px;
      margin-right: calc(((100vw - 100%) / 2) * -1);
		margin-left: calc(((100vw - 100%) / 2) * -1);	
		line-height: 1.5;		
	}
		
	p.p-item-part_price {
		margin: 0; 
		font-weight: bold;
	}
	.p-item-part_price span {
		font-size: 12px;
	}
	
	/* 商品画像部 */
	.bx-viewport ul li:before {
        content: none; width: initial;
        height: initial;
        background: initial;
        box-shadow: initial;
        display: initial;
        position: initial;
        -webkit-border-radius: initial;
        -moz-border-radius: initial;
        border-radius: initial;
        left: initial;
        top: initial;
	}
    .bx-wrapper {
        -webkit-box-shadow: 0 0 0px #ccc;
        box-shadow: 0 0 0px #ccc;
        border: 0px!important;
		margin: 0;
		margin-left: calc(((100vw - 100%) / 2) * -1);
		margin-right: calc(((100vw - 100%) / 2) * -1);
		-webkit-margin-befor: calc(((100vw - 100%) / 2) * -1);
		-webkit-margin-after: calc(((100vw - 100%) / 2) * -1);
    }
	
	img.c-slider_body{
		display: block;
		margin: 16px auto;
	}
	
	/* ボタン部 */
	ul.p-item-part_buttons {
		list-style: none;
		padding: 0;
		border: none;
		border-radius: 0;
	}
	ul.p-item-part_buttons li {
		max-width: 270px;
		padding: 0;
		margin: 0 auto 10px;
	}
	.c-btn-green{
		padding: 10px 5px 10px;
		border-radius: 5px;
		line-height: 1;
	}
	
/* 	body {
		font-family: GenJyuuGothic-Regular,Arial,Helvetica,"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif !important;
		font-size: 103% !important;
	}
	 */
}

/**********************************
 *  -2020.?.?追加(YONE)- 
 * 見出しデザインサンプル
 * ※YONEへ？の部分書いといて!!
 **********************************/
:root {
	--color-green: #669600;
	--color-green-dark: #447400;
}


h2.h2-type1 {
	width: 100%;
	background-color: var(--color-green);
	color: white;
	position: relative;
	padding-left: 1.8em;
}
h2.h2-type1::before {
	content:"";
	width: 1.5em;
	height: 1.5em;
	background-color: var(--color-green-dark);
	position: absolute;
	opacity: 0.8;
	top: -5px;
	left: -5px;
}
h3.h3-type1 {
	position: relative;
	padding-left: 1.8em;
	padding-bottom: 0.2em;
	border-left-style: none;
	border-bottom: 3px var(--color-green-dark) solid;
	display: inline-block;
}
h3.h3-type1::before {
	content:"";
	width: 1.5em;
	height: 1.5em;
	background: url(img/h3-type1.png) no-repeat center/contain;
	position: absolute;
	left: 0;
	top: 5px;
}
h4.h4-type1 {
	padding-left: 0.5em;
	border-left: 5px var(--color-green-dark) solid;
	display: inline-block;
}