@charset "UTF-8";

/* 余白(padding)
----------------------------------------------------------------
基本 coverflex
分割 --3-1 --2-1 --p-1 --2 --1-p --1-2 --1-3
機能 -reverse -early --keep
----------------------------------------------------------------*/
/* カバーflex */
.coverflex{
	display:flex;
	flex-wrap:wrap;
	--width-max:1200px;
	--width-image:.5;
	--width-content:.5;
	--void:calc((100% - var(--width-max)) / 2);
}
.coverflex.--3-1{
	--width-content:.75;
	--width-image:.25;
}
.coverflex.--2-1{
	--width-content:.666;
	--width-image:.334;
}
.coverflex.--p-1{
	--width-content:.618;
	--width-image:.382;
}
.coverflex.--2{
	--width-content:.5;
	--width-image:.5;
}
.coverflex.--1-p{
	--width-content:.382;
	--width-image:.618;
}
.coverflex.--1-2{
	--width-content:.334;
	--width-image:.666;
}
.coverflex.--1-3{
	--width-content:.25;
	--width-image:.75;
}
.coverflex.-reverse{ flex-direction:row-reverse; }
.coverflex > div{
	width:calc(var(--width-max) * var(--width-content));
	padding:var(--gap);
}
.coverflex > figure{ width:calc(var(--void) + var(--width-max) * var(--width-image)); }
.coverflex:not(.-reverse) > div:first-child,
.coverflex.-reverse > div:last-child{ margin:0 0 0 auto; }
.coverflex:not(.-reverse) > div:last-child,
.coverflex.-reverse > div:first-child{ margin:0 auto 0 0; }
.coverflex > figure > img{
	object-fit:cover;
	width:100%;
	height:100%;
	max-width:none;
}
@media screen and (max-width: 1200px){
	.coverflex{ --width-max:100%; }
	.coverflex:not(.-keep).-early > figure,
	.coverflex:not(.-keep).-early > div{ width:100%; }
}
@media screen and (max-width: 960px){
	.coverflex:not(.-keep) > figure,
	.coverflex:not(.-keep) > div{ width:100%; }
}

/* 余白(padding)
----------------------------------------------------------------
上下 p_ p__ p___
上 pt p_t p__t p___t
下 pb p_b p__b p___b
----------------------------------------------------------------*/
.p_{ padding-top:calc(var(--gap) / 1); padding-bottom:calc(var(--gap) / 1); }
.p__{ padding-top:calc(var(--gap) / 2); padding-bottom:calc(var(--gap) / 2); }
.p___{ padding-top:calc(var(--gap) / 4); padding-bottom:calc(var(--gap) / 4); }
.pt{ padding-top:calc(var(--gap) * 2); }
.p_t{ padding-top:calc(var(--gap) / 1); }
.p__t{ padding-top:calc(var(--gap) / 2); }
.p___t{ padding-top:calc(var(--gap) / 4); }
.pb{ padding-bottom:calc(var(--gap) * 2); }
.p_b{ padding-bottom:calc(var(--gap) / 1); }
.p__b{ padding-bottom:calc(var(--gap) / 2); }
.p___b{ padding-bottom:calc(var(--gap) / 4); }

/**
 * コンテンツ幅制限フレックスボックス
----------------------------------------------------------------
基本 wideflex
分割 --2 --1-p --p-1
方向 -reverse
その他 -keep
----------------------------------------------------------------*/
.wideflex{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:var(--gap);
	position:relative;
	margin:var(--gap) 0;
	--outside:calc((100% - var(--bp-pc)) / 2 + var(--gap));
	--inside:calc(var(--bp-pc) - var(--gap) * 3)
}
.wideflex > :nth-child(n){
	box-sizing:border-box;
	position:relative;
	min-width:0;
	overflow-wrap:break-word;
}
.wideflex > :nth-child(2n - 1) img{ width:100%; }
.wideflex > :nth-child(2n){ margin-right:var(--outside); }
.wideflex.-reverse > :nth-child(2n){ margin-right:0; }
.wideflex.-reverse > :nth-child(2n - 1){ margin-left:var(--outside); }
.wideflex.-reverse > :nth-child(2n - 1) img{ width:auto; }
.wideflex.-reverse > :nth-child(2n) img{ width:100%; }
.wideflex.--2 > :nth-child(2n - 1){ flex-basis:calc(var(--outside) + var(--inside) / 2); }
.wideflex.--2 > :nth-child(2n - 0){ flex-basis:calc(var(--inside) / 2); }
.wideflex.--1-p > :nth-child(2n - 1){ flex-basis:calc(var(--outside) + var(--inside) * 0.382); }
.wideflex.--1-p > :nth-child(2n - 0){ flex-basis:calc(var(--inside) * 0.618); }
.wideflex.--p-1 > :nth-child(2n - 1){ flex-basis:calc(var(--outside) + var(--inside) * 0.618); }
.wideflex.--p-1 > :nth-child(2n - 0){ flex-basis:calc(var(--inside) * 0.382); }
.wideflex.-reverse.--2 > :nth-child(2n - 1){ flex-basis:calc(var(--inside) / 2); }
.wideflex.-reverse.--2 > :nth-child(2n - 0){ flex-basis:calc(var(--outside) + var(--inside) / 2); }
.wideflex.-reverse.--1-p > :nth-child(2n - 1){ flex-basis:calc(var(--inside) * 0.618); }
.wideflex.-reverse.--1-p > :nth-child(2n - 0){ flex-basis:calc(var(--outside) + var(--inside) * 0.382); }
.wideflex.-reverse.--p-1 > :nth-child(2n - 1){ flex-basis:calc(var(--inside) * 0.382); }
.wideflex.-reverse.--p-1 > :nth-child(2n - 0){ flex-basis:calc(var(--outside) + var(--inside) * 0.618); }
@media screen and (max-width: 1200px){
	.wideflex{
		--outside:var(--gap);
		--inside:calc(100% - var(--gap) * 3)
	}
}
@media screen and (max-width: 960px){

	/* 継承しない場合は横幅を1カラム化 */
	.wideflex:not(.-keep) > :nth-child(n),
	.wideflex:not(.-keep).-reverse > :nth-child(n){ flex-basis:100%; }
	.wideflex:not(.-keep) > :nth-child(2n){ margin:0 var(--gap); }
	.wideflex:not(.-keep).-reverse > :nth-child(2n){ margin:0; }
	.wideflex:not(.-keep).-reverse > :nth-child(2n - 1){ margin:0 var(--gap); }

}

/**
 * 3D直方体
----------------------------------------------------------------
基準直方体 cube
----------------------------------------------------------------*/
.cube{
	--cube-w:300px;
	--cube-h:100px;
	--cube-d:200px;
	--rotate-y:15deg;
	--rotate-x:-15deg;
	--outline:#ccc;
	position:absolute;
	transform-style:preserve-3d;
	width:var(--cube-w);
	height:var(--cube-h);
	transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) rotateZ(0deg);
	transform-origin:right top;
	transform-origin:center center;
}
.cube > *{
	position:absolute;
	box-sizing:border-box;
	border:1px solid var(--outline);
	text-align:center;
	padding-top:10px;
	color:var(--main);
}
.cube > :nth-child(1){
	width:var(--cube-w);
	height:var(--cube-h);
	transform:translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(2){
	width:var(--cube-w);
	height:var(--cube-h);
	transform:rotateY(180deg) translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(3){
	width:var(--cube-d);
	height:var(--cube-h);
	transform:rotateY(90deg) translateZ(calc(var(--cube-w) - var(--cube-d) / 2));
}
.cube > :nth-child(4){
	width:var(--cube-d);
	height:var(--cube-h);
	transform:rotateY(-90deg) translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(5){
	width:var(--cube-w);
	height:var(--cube-d);
	transform:rotateX(90deg) translateZ(calc(var(--cube-d) / 2));
}
.cube > :nth-child(6){
	width:var(--cube-w);
	height:var(--cube-d);
	transform:rotateX(-90deg) translateZ(calc(var(--cube-h) - var(--cube-d) / 2));
}

/**
 * 新着一覧
----------------------------------------------------------------
基本 topics
----------------------------------------------------------------*/
.topics > section{
	display:flex;
	gap:var(--gap);
	flex-wrap:wrap;
}
.topics > section:not(:first-child){
	border-top:1px solid #ccc;
	padding-top:var(--gap);
	margin-top:var(--gap);
}
.topics > section > figure{ width:calc(33.3333% - var(--gap)); }
.topics > section > figure + div{ width:66.6666%; }
.topics > section > div > time{ color:var(--sub); }
.topics > section > div > h2{
	font-size:var(--l);
	margin-bottom:20px;
}
@media screen and (max-width: 520px){
	.topics > section{ display:block; }
	.topics > section > figure{
		padding-top:var(--gap);
		width:auto;
	}
	.topics > section > figure + div{ width:auto; }
}

/**
 * 全体
----------------------------------------------------------------*/
:root{
	
	/* 配色 */
	--main:rgb(0,104,183);
	--sub:rgb(126,206,244);
	--main-hover:rgb(76,149,204);
	--sub-hover:rgb(164,220,247);
	--black:rgb(10,10,10);
	--brown:rgb(79,50,11);
	--milk:rgb(248,234,160);
	--gray:#ccc;
	
	--gap:clamp(
	
		/* 【最小余白】SP時の余白(半分) */
		calc(1px * var(--gap-base) / 2),
		
		/* 【推奨余白】SP時の余白(半分)相当の画面比値 */
		calc(var(--gap-base) / var(--tab) * 100vw),
		
		/* 【最大余白】PC時の余白 */
		calc(1px * var(--gap-base))
	
	);
}

/* リッチフォーム初期設定 */
.richform{

	/* 配色 */
	--black:rgb(10,10,10);
	--gray:#ccc;
	--silver:#f5f5f5;
	--blue:rgb(0,104,183);
	--blue-disabled:rgb(127,179,219);
	--white:white;
	--red:crimson;
	--default-color:rgba(0,0,0,0);
	
	/* その他 */
	--border-radius:0;
	--border-radius-top:0;
	--border-radius-right:0;
	--border-radius-bottom:0;
	--border-radius-left:0;

}
:focus{ outline:none; }

/* ボディ */
body{
	color:var(--black);
	font-family:var(--gothic);
	font-feature-settings:"palt";
}

/* WPバー */
#wpadminbar{ display:none; }

/* recaptcha */
.grecaptcha-badge{ display:none; }

.alone.-nobottom{ margin-bottom:0; }

/**
 * ヘッダー(PC)
----------------------------------------------------------------*/
@media screen and (min-width: 961px){

	body > header{
		position:fixed;
		top:0;
		left:0;
		right:0;
		height:200px;
		z-index:1000;
	}
	body > main{ margin-top:200px; }
	
	/* ロゴ */
	#logo{
		position:absolute;
		top:0;
		left:50%;
		z-index:100;
		width:220px;
		margin-left:-110px;
		background:var(--main);
		border-radius:110px 110px 0 0;
	}
	#logo > a:hover{ opacity:.7; }
	
	/* ヘッドカード(プラナビ・電話番号) */
	#hcard{
		position:absolute;
		top:0;
		left:0;
		right:0;
		border-top:10px solid var(--main);
		height:60px;
		background:white;
	}
	#hcard > .base > div{
		display:flex;
		gap:220px;
		margin:0 10px;
		align-items:flex-end;
	}
	#hcard > .base > div > *{ width:50%; }
	
	/* ヘッドカード：プラナビ */
	#pnav > ul{
		font-size:0;
		padding:3px 0;
		text-align:right;
	}
	#pnav > ul > li{ display:inline-block; }
	#pnav > ul > li > a{
		display:inline-block;
		color:var(--main);
		font-size:14px;
		line-height:22px;
		height:22px;
	}
	#pnav > ul > li:not(:first-child) > a{ margin-left:.5em; }
	#pnav > ul > li > a:hover{ color:var(--black); }
	
	/* ヘッドカード：電話番号 */
	#tel{ text-align:right; }
	#tel:hover{ opacity:.7; }
	#tel > img{ display:inline-block; }
	
	/* グロナビ */
	#gnav{
		background:var(--main);
		height:140px;
		position:absolute;
		top:60px;
		left:0;
		right:0;
	}
	#gnav > ul{
		display:flex;
		position:absolute;
		top:10px;
		right:10px;
		left:10px;
		justify-content:center;
	}
	#gnav > ul > li{ position:relative; }
	#gnav > ul > li:nth-child(3){ margin-right:220px; }
	#gnav > ul > li > a{
		display:block;
		max-width:140px;
		height:120px;
		position:relative;
		border-radius:50% 50% 0 0;
	}
	#gnav > ul > li > a:hover{ background:rgb(25,119,190); }
	#gnav > ul > li > a::before,
	#gnav > ul > li:nth-child(3n) > a::after{
		content:'';
		position:absolute;
		top:30px;
		bottom:0;
	}
	#gnav > ul > li > a::before{ border-left:2px dotted white; }
	#gnav > ul > li:nth-child(3n) > a::after{
		right:0;
		border-right:2px dotted white;
	}
	#gnav > ul > li > a > figure > figcaption{
		color:white;
		font-size:14px;
		font-weight:bold;
		line-height:20px;
		text-align:center;
	}
	#gnav > ul > li > a > figure > figcaption > small{
		font-size:12px;
		font-weight:normal;
		line-height:15px;
	}
	/*
	#gnav > ul > li > a:hover > figure > figcaption,
	#gnav > ul > li > a:hover > figure > figcaption > small{ color:var(--sub); }
	*/
	
	/* グロナビサブメニュー */
	#gnav > ul > li > ul{
		background:rgba(255,255,255,.95);
		position:absolute;
		border-radius:20px;
		margin-top:30px;
		visibility:hidden;
	}
	#gnav > ul > li:hover > ul{ visibility:visible; }
	#gnav > ul > li > ul::before{
		left:70px;
		position:absolute;
		bottom:100%;
		content:'';
		display:block;
		width:0;
		height:0;
		border-style:solid;
		border-width:0 10px 30px 10px;
		border-color:transparent transparent rgba(255,255,255,.95) transparent;
	}
	#gnav > ul > li > ul::after{
		content:'';
		display:block;
		bottom:100%;
		height:30px;
		left:0;
		right:0;
		position:absolute;
	}
	#gnav > ul > li > ul,
	#gnav > ul > li > ul::before,
	#gnav > ul > li > ul::after,
	#gnav > ul > li > ul > li,
	#gnav > ul > li > ul > li::after,
	#gnav > ul > li > ul > li > a,
	#gnav > ul > li > ul > li > a::after,
	#gnav > ul > li > ul > li > a > img,
	#gnav > ul > li > ul > li > a > p{ transition:background .2s; }
	
	/* 画像ナビ */
	.imgnav{
		display:flex;
		flex-wrap:wrap;
		width:900px;
		padding:20px 20px 20px 160px;
		position:relative;
	}
	.imgnav > li:first-child{
		position:absolute;
		left:20px;
		top:20px;
	}
	.imgnav > li:first-child::after{
		content:'';
		position:absolute;
		right:-10px;
		top:0;
		bottom:0;
		border-right:2px dotted var(--main);
		display:block;
	}
	.imgnav > li:first-child > a{
		width:120px;
		height:120px;
		display:block;
		border-radius:10px;
	}
	.imgnav > li:first-child > a > p{
		font-size:var(--m);
		font-weight:bold;
		color:var(--main);
		text-align:center;
		margin-top:-12px;
	}
	.imgnav > li:not(:first-child){ width:240px; }
	.imgnav > li:not(:first-child) > a{
		display:block;
		width:240px;
		height:60px;
		border-radius:10px;
		display:flex;
		align-items:center;
		position:relative;
	}
	.imgnav > li:not(:first-child) > a::after{
		content:'';
		position:absolute;
		top:0;
		bottom:0;
		right:14px;
		margin:auto 0;
		width:7px;
		height:7px;
		border-top:1px solid var(--main);
		border-right:1px solid var(--main);
		z-index:1000;
		transform:rotate(45deg);
	}
	.imgnav > li:not(:first-child) > a > img{
		width:70px;
		margin:0;
	}
	.imgnav > li:not(:first-child) > a > p{
		font-size:17px;
		line-height:22px;
		font-weight:bold;
		color:var(--main);
		padding:4px 30px 4px 4px;
	}
	.imgnav > li > a:hover{ background:rgba(127,179,219,0.2); }

}
/*
@media screen and (max-width: 1060px){
	#gnav > ul > li > a > figure > figcaption{ transform:scale(.8, 1); }
	#gnav > ul > li > a > figure > figcaption > small{ transform:scale(1, 1); }
}
*/

/* 弧 */
#arc{
	position:absolute;
	top:calc(100% - 1px);
	left:0;
	right:0;
}
#arc > img{
	max-width:none;
	width:100%;
}

/* Instagram */
#instagram{
	position:fixed;
	bottom:20px;
	right:20px;
	z-index:900;
	box-shadow:5px 5px 5px rgba(0,0,0,.05);
	transition:bottom .8s;
}
#instagram.static{
	position:relative;
	margin:10px auto 40px;
	right:auto;
	left:auto;
	bottom:auto;
}
#instagram.inactive{ bottom:-500px; }
#instagram > button{
	position:absolute;
	top:-5px;
	right:-5px;
	background:var(--black);
	border-radius:50%;
	width:40px;
	height:40px;
	z-index:1;
}
#instagram > button:hover{ background:var(--main); }
#instagram > button::before,
#instagram > button::after{
	position:absolute;
	content:'';
	display:block;
	width:2px;
	height:50%;
	background:white;
	top:50%;
	left:50%;
	top:calc(25% - 1px);
	left:calc(50% - 1px);
}
#instagram > button::before{ transform:rotate(-45deg); }
#instagram > button::after{ transform:rotate(45deg); }
#instagram > div > footer{
	display:flex;
	gap:var(--padding-half);
	margin-top:var(--padding-half);
}
#instagram > div > footer > *{
	flex-basis:100%;
	background:#e5e5e5;
	display:block;
	text-align:center;
	font-weight:bold;
	padding:10px;
}
#instagram > div > footer > *:hover{
	background:rgb(158,0,93);
	color:white;
}
#instagram > figure > img{
	max-width:none;
	height:160px;
}
@media screen and (max-width: 768px){
	#instagram{
		left:20px;
		max-width:440px;
		margin:0 0 0 auto;
	}
	#instagram > button{
		width:30px;
		height:30px;
	}
}

/* Instagram SP */
#instagram_sp{
	display:none;
	max-width:525px;
	margin:0 auto;
}
@media screen and (max-width: 960px){
	#instagram_sp{ display:flex; }
}
@media screen and (max-width: 565px){
	#instagram_sp{ margin:0 20px; }
}

/**
 * ヘッダー(SP)
----------------------------------------------------------------*/
@media screen and (max-width: 960px){

	body{
		--header-height:clamp(
			calc(50px),
			calc(7vw),
			calc(100px)
		);
	}
	body > main{ margin-top:var(--header-height); }
	
	/* ヘッドカード(モバイル) */
	#hcardsp{
		background:var(--main);
		position:fixed;
		top:0;
		left:0;
		right:0;
		height:var(--header-height);
		z-index:1100;
	}
	
	/* ロゴ */
	#logo{
		position:absolute;
		top:0;
		left:0;
	}
	#logo > a img{
		max-width:none;
		max-height:var(--header-height);
	}
	#logo > a:hover{ opacity:.7; }
	
	/* メニュー */
	#open,
	#close{
		position:fixed;
		top:0;
		right:0;
		width:var(--header-height);
	}
	#open:hover,
	#close:hover{ opacity:.7; }
	#close{ display:none; }
	body.clicked #open{ display:none; }
	body.clicked #close{ display:block; }
	
	/* モバイルメニュー */
	#spmenu{
		display:none;
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		padding:calc(var(--header-height) + 40px) 0 20px;
		background:rgba(255,255,255,.9);
		z-index:1000;
		overflow-y:scroll;
	}
	body.clicked #spmenu{ display:block; }
	
	/* グロナビ */
	#gnav > ul{
		display:flex;
		flex-wrap:wrap;
		align-items:stretch;
		max-width:525px;
		margin:0 auto;
		position:relative;
	}
	#gnav > ul::before{
		content:'サイトメニュー';
		display:block;
		position:absolute;
		top:-30px;
		line-height:30px;
		height:30px;
		text-align:center;
		padding:0 20px;
		letter-spacing:.1em;
		color:white;
		background:var(--main);
		border-radius:15px;
		left:0;
		right:0;
		font-weight:bold;
	}
	#gnav > ul > li{ width:33.3333%; }
	#gnav > ul > li > a{
		display:block;
		margin:0 auto;
		border-bottom:2px dotted var(--main);
		padding:10px;
		height:100%;
	}
	#gnav > ul > li > a:hover{ background:rgb(242,250,253); }
	#gnav > ul > li:nth-child(3n-1) > a,
	#gnav > ul > li:nth-child(3n-2) > a{ border-right:2px dotted var(--main); }
	#gnav > ul > li > a > figure > div > img{
		max-width:74px;
		margin:0 auto;
	}
	#gnav > ul > li > a > figure > figcaption{
		font-size:14px;
		font-weight:bold;
		line-height:20px;
		text-align:center;
	}
	#gnav > ul > li > a:hover > figure > figcaption{ color:var(--main); }
	#gnav > ul > li > a > figure > figcaption > small{
		font-size:12px;
		font-weight:normal;
		line-height:15px;
		display:block;
	}
	
	/* グロナビサブメニュー */
	#gnav{ margin-top:340px; }
	#gnav > ul > li{ position:relative; }
	#gnav > ul > li > ul{
		position:absolute;
		top:-300px;
		left:0;
		width:525px;
		display:flex;
		flex-wrap:wrap;
		border-bottom:2px dotted var(--main);
	}
	#gnav > ul > li > ul::before{
		content:'商品ラインナップ';
		display:block;
		position:absolute;
		top:-30px;
		line-height:30px;
		height:30px;
		text-align:center;
		padding:0 20px;
		letter-spacing:.1em;
		color:white;
		background:var(--main);
		border-radius:15px;
		left:0;
		right:0;
		font-weight:bold;
	}
	#gnav > ul > li > ul > li{ width:50%; }
	#gnav > ul > li > ul > li > a{
		display:flex;
		border-bottom:2px dotted var(--main);
		height:60px;
		align-items:center;
	}
	#gnav > ul > li > ul > li > a:hover{ background:rgb(242,250,253); }
	#gnav > ul > li > ul > li:nth-child(2n- 1) > a{ border-right:2px dotted var(--main); }
	#gnav > ul > li > ul > li:last-child:nth-child(2n - 1) > a{ border-bottom:none; }
	#gnav > ul > li > ul > li > a > img{
		width:70px;
		margin:0;
	}
	#gnav > ul > li > ul > li > a > p{
		font-size:14px;
		font-weight:bold;
		text-align:center;
		padding:4px;
	}
	
	/* プラナビ */
	#pnav > ul{
		max-width:525px;
		margin:0 auto;
	}
	#pnav > ul > li > a{
		display:block;
		border-bottom:2px dotted var(--main);
		padding:10px;
		font-size:14px;
		font-weight:bold;
		text-align:center;
	}
	#pnav > ul > li > a:hover{
		background:rgb(242,250,253);
		color:var(--main);
	}
	
	/* 電話番号 */
	#tel{
		max-width:525px;
		margin:20px auto 40px;
		display:block;
	}

}
@media screen and (max-width: 565px){

	#gnav > ul,
	#pnav > ul{ margin:0 20px; }
	#gnav > ul > li{ width:50%; }
	#gnav > ul > li:nth-child(3n-1) > a,
	#gnav > ul > li:nth-child(3n-2) > a{ border-right:none; }
	#gnav > ul > li:nth-child(2n-1) > a{ border-right:2px dotted var(--main); }
	#gnav > ul > li > ul{ width:200%; }

}

/**
 * コンテンツ
----------------------------------------------------------------*/
#cont{
	min-height:500px;
	padding-bottom:80px;
}

/* ページ名 */
#pagename{
	background:var(--sub) url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/theme/bg_h1.png") scroll no-repeat center top;
	min-height:200px;
	border-bottom:5px solid var(--main);
}
#pagename > h1{
	max-width:560px;
	font-size:var(--xl);
}
@media screen and (max-width: 960px){
	#pagename{
		background:white;
		position:relative;
		padding:20px 80px;
	}
	#pagename::before,
	#pagename::after{
		content:'';
		position:absolute;
		top:0;
		bottom:0;
		background:var(--sub) url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/theme/bg_h1_sp.png") scroll no-repeat left top;
		width:80px;
	}
	#pagename::before{ left:0; }
	#pagename::after{
		right:0;
		background-position:right top;
	}
}
@media screen and (max-width: 512px){
	#pagename{
		min-height:150px;
		padding:20px 60px;
	}
	#pagename::before,
	#pagename::after{
		width:60px;
		background-size:auto 150px;
	}
	#pagename > h1{ font-size:var(--l); }
}

/* パン屑リスト */
#pan{ max-width:560px; }
#pan > ol{ line-height:1; }
#pan > ol > li{
	display:inline;
	font-size:14px;
	letter-spacing:0;
	font-weight:normal;
}
#pan > ol > li > a{ display:inline; }
#pan > ol > li > a{ color:var(--main); }
#pan > ol > li > a:hover{ color:var(--main-hover); }
#pan > ol > li:not(:first-child)::before{ content:'>'; }

/* 前後ナビ */
#anav{ padding:40px 0; }
#anav > .flex > a{
	display:block;
	background:var(--milk);
	font-size:var(--s);
	font-weight:bold;
	display:flex;
	border-radius:30px;
	align-items:center;
	position:relative;
}
#anav > .flex > a > span{
	min-width:120px;
	height:100%;
	display:block;
	background:var(--brown);
	color:white;
	text-align:center;
	letter-spacing:.1em;
	padding:10px 20px;
	border-radius:30px 0 0 30px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	border-right:1px solid var(--milk);
}
#anav > .flex > a > p{
	color:var(--brown);
	padding:10px 20px 10px 10px;
}
#anav > .flex > a::after{
	content:'';
	width:1px;
	height:20px;
	background:var(--brown);
	position:absolute;
	bottom:-10px;
	left:0;
	right:0;
	margin:0 auto;
}
#anav > .flex > a:hover{ background:rgb(244,223,112); }
#anav > .flex > a:hover::after{
	bottom:0;
	height:10px;
}
#anav > .flex > a:hover > span{ background:rgb(114,91,59); }

/* ピックアップ記事 */
#pickups > h2{ background:rgb(242,250,253); }
#pickups > div{
	overflow-x:scroll;
	padding:20px 10px 10px;
	background:rgb(242,250,253);
	position:relative;
}
#pickups > div > ul{
	display:flex;
	gap:20px;
	padding:0 10px;
}
#pickups > div > ul > li:last-child{ border-right:20px solid rgba(0,0,0,0); }
#pickups > div > ul > li > a{
	display:block;
	width:280px;
	padding:20px;
	border-radius:30px;
	background:white;
	height:100%;
}
#pickups > div > ul > li > a:hover{
	background:var(--main);
	color:white;
}
#pickups > div > ul > li > a > h3{
	color:var(--main);
	font-weight:bold;
	font-size:var(--s);
	padding:10px 0 4px;
}
#pickups > div > ul > li > a:hover > h3{ color:white; }
#pickups > div > ul > li > a > p{ font-size:var(--xs); }
#pickups > div > ul > li > a:hover > p{ color:white; }
#pickups > div > ul > li > a > img{
	width:240px;
	height:240px;
	object-fit:cover;
	border-radius:15px;
}
@media screen and (max-width: 1200px){
	#pickups > div > ul{ justify-content:flex-start; }
}
@media screen and (max-width: 768px){
	#pickups > div > ul > li > a{
		width:230px;
		padding:15px;
		border-radius:20px;
	}
	#pickups > div > ul > li > a > img{
		width:200px;
		height:200px;
		border-radius:10px;
	}
}

/**
 * フッター
----------------------------------------------------------------*/
body > footer{ background:rgb(229,239,247); }

/* フッターカード */
#fcard{
	max-width:768px;
	margin:0 auto;
	padding:20px 0;
}
@media screen and (max-width: 768px){
	#fcard{ max-width:400px; }
}

/* 会社カード */
@media screen and (max-width: 768px){
	#comcard{ text-align:center; }
}

/* フッター問い合わせ */
#fcontact{
	border:1px solid var(--main);
	text-align:center;
	padding:4px 40px;
	letter-spacing:.1em;
	font-size:var(--m);
	color:var(--main);
	margin:10px 0 0 15px;
	display:inline-block;
	font-weight:bold;
}
#fcontact:hover{
	background:var(--main);
	color:white;
}
@media screen and (max-width: 768px){
	#fcontact{
		margin:15px auto;
		padding:8px 40px;
	}
}

/* フッターナビゲーション */
#fnav > ul > li > a{
	font-size:var(--m);
	color:var(--main);
	margin-bottom:10px;
	font-weight:bold;
	display:inline-block;
}
#fnav > ul > li > a:hover{ color:var(--main-hover); }
#fnav > ul > li:first-child > ul{ gap:0 var(--gap); }
#fnav > ul > li > ul a:hover{ color:var(--main); }
@media screen and (max-width: 768px){
	#fnav > ul{
		margin:0;
		gap:0;
	}
	#fnav > ul > li > a{
		display:block;
		background:var(--main);
		color:white;
		padding:4px 10px;
		margin:0;
	}
	#fnav > ul > li > a:hover{
		background:var(--main-hover);
		color:white;
	}
	#fnav > ul > li > ul{
		display:flex;
		flex-wrap:wrap;
	}
	#fnav > ul > li:first-child > ul{ gap:0; }
	#fnav > ul > li > ul{ background:white; }
	#fnav > ul > li > ul > li{ flex-basis:50%; }
	#fnav > ul > li > ul a{
		display:block;
		padding:8px 20px 8px 10px;
		border-bottom:1px solid rgb(178,209,233);
		font-weight:bold;
		position:relative;
		height:100%;
	}
	#fnav > ul > li > ul a::after{
		content:'';
		position:absolute;
		top:0;
		bottom:0;
		right:10px;
		margin:auto 0;
		width:7px;
		height:7px;
		border-top:1px solid var(--main);
		border-right:1px solid var(--main);
		z-index:1;
		transform:rotate(45deg);
	}
	#fnav > ul > li > ul li:nth-child(2n - 1) > a{ border-right:1px solid rgb(178,209,233); }
	#fnav > ul > li > ul li:nth-child(2n - 1):last-child > a{ border-bottom:none; }
	#fnav > ul > li > ul a:hover{ background:rgb(229,239,247); }
}

/* 著作権表記 */
#cr{
	background:var(--main);
	color:white;
	font-weight:bold;
	font-size:var(--s);
	text-align:center;
	padding:4px 20px;
}

/**
 * プロトタイプ
----------------------------------------------------------------*/
.bold{ font-weight:bold; }

/* フォントサイズ */
.--xxl{ font-size:var(--xxl); }
.--xl{ font-size:var(--xl); }
.--l{ font-size:var(--l); }
.--m{ font-size:var(--m); }
.--s{ font-size:var(--s); }
.--xs{ font-size:var(--xs); }
.--xxs{ font-size:var(--xxs); }

/* 見出し */
.h2{
	background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/theme/bg_h2.png") scroll no-repeat center top / 100px;
	padding-top:120px;
	margin-top:40px;
	margin-bottom:40px;
}
.h2 > h2{ color:var(--main); }
.h2 > p{
	font-size:var(--xxs);
	letter-spacing:0;
}
.h2_recruit{
	padding-top:120px;
	margin-top:40px;
	margin-bottom:40px;
	position:relative;
}
.h2_recruit > h2{
	font-size:var(--xl);
	font-weight:bold;
	letter-spacing:.1em;
	text-align:center;
}
.h2_recruit > p{
	font-size:var(--xs);
	text-align:center;
}
.h2_recruit::after{
	content:'';
	width:100px;
	height:5px;
	background:var(--main);
	position:absolute;
	bottom:-10px;
	left:0;
	right:0;
	margin:auto;
}
.h3{
	color:var(--main);
	border-bottom:1px solid var(--sub);
	position:relative;
	margin:var(--gap) 0 var(--gap-half);
	padding:4px 0;
}
.h3::after{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	width:100px;
	border-bottom:1px solid var(--main);
	z-index:1;
}
.h3 > small{
	display:block;
	font-size:var(--s);
	font-weight:normal;
}
.h3.wrap{
	margin-right:var(--gap);
	margin-left:var(--gap);
}
.h3set{
	position:relative;
	margin-bottom:120px;
}
.h3set > p{
	position:absolute;
	right:0;
	top:0;
	width:50%;
	background:white;
	z-index:1;
	border:1px solid var(--sub);
	padding:10px;
	font-size:var(--xs);
}
.h3_recruit{
	background:var(--main);
	color:white;
	text-align:center;
	padding:4px 20px;
	border-radius:8px;
	font-weight:bold;
	font-size:var(--l);
}
.h4{
	margin:0 0 var(--gap-quarter);
	color:var(--main);
}
.h4 > small{
	display:inline-block;
	background:var(--main);
	color:white;
	font-weight:bold;
	border-radius:1em;
	margin-right:10px;
	padding:4px 1em;
}
.h4.wrap{ margin-top:15px; }
.h5{
	color:var(--main);
	font-weight:bold;
	font-size:var(--s);
	margin:0 0 5px 0;
}
@media screen and (max-width: 960px){
	.h3set{ margin-bottom:40px; }
	.h3set > p{
		position:static;
		width:100%;
	}
}

/* ボタン */
.buttons{ padding:40px 0; }
.buttons > *{
	flex-basis:400px;
	font-size:var(--m);
	color:var(--brown);
	background:var(--milk);
	padding:15px 20px;
	border-radius:30px;
	font-weight:bold;
	position:relative;
}
.buttons > *::after{
	content:'';
	width:1px;
	height:20px;
	background:var(--brown);
	position:absolute;
	bottom:-10px;
	left:0;
	right:0;
	margin:0 auto;
}
.buttons > *:hover{
	background:var(--brown);
	color:white;
}
.buttons > *:hover::after{
	background:var(--milk);
	bottom:0;
	height:10px;
}
.buttons.-blue > *{
	color:white;
	background:var(--main);
}
.buttons.-blue > *:hover{
	background:var(--sub);
	color:var(--black);
}
.buttons.-min{ padding:20px 0; }
.buttons.-min > *{
	flex-basis:300px;
	font-size:var(--s);
	padding:10px 15px;
	border-radius:20px;
}
.buttons.-notop{
	margin-top:0;
	padding-top:0;
}
.buttons.-halftop{
	margin-top:0;
	padding-top:20px;
}
.buttons_recruit{
	padding:0 20px;
	margin-top:-20px;
}
.buttons_recruit > a{
	width:531px;
	padding:20px 30px;
	font-size:var(--xl);
	text-align:center;
	color:white;
	background:var(--main);
	font-weight:bold;
	display:inline-block;
}
.buttons_recruit > a:hover{ background:var(--sub); }
@media screen and (max-width: 960px){
	.buttons_recruit{
		text-align:center;
		margin-top:20px;
	}
	.buttons_recruit > a{
		width:auto;
		font-size:var(--l);
		padding:10px 20px;
		display:block;
	}
}
@media screen and (max-width: 768px){
	.buttons > *{
		flex-basis:100%;
		font-size:var(--m);
		padding:10px 20px;
	}
}

/* 拡張ベース */
.base.-wide{ max-width:1536px; }

/* 画像タイトル */
.figcaption{
	text-align:center;
	font-weight:bold;
	line-height:1.4;
	padding-top:6px;
}
.figcaption.big{ font-size:var(--m); }

/* 超見出し */
.bigtext{
	font-size:var(--xxl);
	font-weight:bold;
	text-align:center;
	color:var(--main);
}
.bigtext.-black{ color:var(--black); }
.bigtext.l{ text-align:left; }

/* 横幅最大 */
.max,
.max img{
	max-width:none;
	width:100%;
}

/* 丸リスト */
.circlelist > li::before{
	content:'●';
	color:var(--main);
}

/* インスタフレーム */
.instaframe{
	--padding:clamp(
	
		/* 【最小余白】SP時の余白(半分) */
		calc(1px * var(--gap-base) / 2 / 2),
		
		/* 【推奨余白】SP時の余白(半分)相当の画面比値 */
		calc(var(--gap-base) / 2 / var(--sp) * 100vw),
		
		/* 【最大余白】PC時の余白 */
		calc(1px * var(--gap-base) / 2)
	
	);
	
	--padding-half:calc(var(--padding) / 2);
	--padding-double:calc(var(--padding) * 2);
	--padding-minus:calc(var(--padding) * -1);
	background:linear-gradient(135deg,
		rgb(254,192,83) 0%,
		rgb(242,32,62) 33.3%,
		rgb(183,41,168) 66.6%,
		rgb(83,66,214) 100%
	);
	position:relative;
	z-index:1000;
	border-radius:var(--padding);
	padding:var(--padding-double);
	display:flex;
	gap:var(--padding-half);
	justify-content:space-between;
	align-items:center;
	max-width:512px;
}
.instaframe figure{ margin:var(--padding-minus) var(--padding-minus) var(--padding-minus) 0; }
.instaframe::before,
.instaframe::after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:-1;
	transition:all .2s;
}
.instaframe::before{
	background:rgba(255,255,255,.8);
	border-radius:var(--padding);
}
.instaframe::after{
	background:white;
	margin:var(--padding);
}
a.instaframe:hover::before{ background:rgba(255,255,255,.6); }
a.instaframe:hover::after{ background:rgba(255,255,255,.9); }
@media screen and (max-width: 768px){
	.instaframe figure{ display:none; }
}

/* 警告 */
.caution{
	border:1px solid crimson;
	color:crimson;
	padding:10px;
}

/* 脚注 */
.note{
	border:1px solid var(--main);
	color:var(--main);
	padding:10px;
	font-size:var(--xs);
	line-height:1.4;
}
.note_recruit{
	font-size:var(--xs);
	color:rgb(132,132,132);
	line-height:1.5;
}

/* 強調 */
.em{
	font-size:var(--l);
	font-weight:bold;
	font-style:normal;
}

/* 青字 */
.blue{ color:var(--main); }

/* 大文字 */
.big{ font-size:140%; }

/* テーブル */
.table > table table{
	margin:-5px -10px;
	width:calc(100% + 20px);
}
.table > table table tr:first-child > *{ border-top:0; }
.table > table table tr:last-child > *{ border-bottom:0; }
.table_recruit{ margin:20px 0; }
.table_recruit tr > *{
	border-bottom:1px solid #ccc;
	padding:6px 10px;
	font-size:var(--m);
	font-weight:bold;
}
.table_recruit tr:first-child > *{ border-top:1px solid #ccc; }
.table_recruit tr > th{
	width:200px;
	color:var(--main);
	background:rgb(229,239,247);
}
@media screen and (max-width: 768px){
	.table_recruit tr > th{ width:120px; }
}

/* GoogleMaps */
.gm > iframe{ height:500px; }
.gm.tall > iframe{ height:700px; }

/* YouTube */
.ytwrapper{
	margin:0 auto;
	max-width:768px;
	padding-bottom:80px;
}

/* インライン画像 */
.inlineimage{
	display:inline-block;
	margin:0;
}

/* 番号付きリスト */
.nlist{
	max-width:768px;
	margin:0 auto;
}
.nlist > li{
	font-size:var(--l);
	font-weight:bold;
	margin:0 var(--gap);
	position:relative;
	min-height:100px;
	padding:10px 0 10px 100px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.nlist > li:not(:last-child){ border-bottom:1px solid var(--gray); }
.nlist > li::before{
	content:'';
	background:scroll no-repeat center center / contain;
	width:80px;
	height:80px;
	display:block;
	position:absolute;
	top:10px;
	left:0;
}
.nlist > li:nth-child(1)::before{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/numbers01.png"); }
.nlist > li:nth-child(2)::before{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/numbers02.png"); }
.nlist > li:nth-child(3)::before{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/numbers03.png"); }
.nlist > li:nth-child(4)::before{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/numbers04.png"); }
.nlist > li:nth-child(5)::before{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/numbers05.png"); }
.nlist > li:nth-child(6)::before{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/numbers06.png"); }
.nlist > li:nth-child(7)::before{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/numbers07.png"); }
.nlist > li:nth-child(8)::before{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/numbers08.png"); }
.nlist > li:nth-child(9)::before{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/numbers09.png"); }

/* 背景 */
.bg_blue{ background:rgb(0,104,183); color:white; }
.bg_blue10{ background:rgb(229,239,247); }
.bg_blue20{ background:rgb(204,224,240); }
.bg_water20{ background:rgb(229,245,252); }
.bg_water10{ background:rgb(242,250,253); }
.bg_stripe{ background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/patterns/stripe.png") scroll repeat center center; }
.bg_check{ background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/patterns/check.png") scroll repeat center center; }
.bg_watercheck{ background:rgb(242,250,253) url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/patterns/check.png") scroll repeat center center; }
.bg_flow{ background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/delivery/bg_flow.png") scroll no-repeat center top / 100%; }
.bg_leadvis{ background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/farmers/bg_leadvis.png") scroll no-repeat center top / 100%; }
.bg_charactors{
	background:
		url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/theme/bg_charactors_mo.png") scroll no-repeat left top,
		url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/theme/bg_charactors_genki.png") scroll no-repeat right 500px;
	background-color:rgb(242,250,253);
}
@media screen and (max-width: 960px){
	.bg_charactors{ background-size:50%; }
}
@media screen and (max-width: 768px){
	.bg_flow{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/delivery/bg_flow_sp.png"); }
	.bg_leadvis{ background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/farmers/bg_leadvis_sp.png"); }
}

/* 採用問い合わせボックス */
.contactbox_recruit{
	text-align:center;
	padding:40px 20px;
}
.contactbox_recruit > a{
	background:var(--main);
	display:inline-block;
	border-radius:20px;
}
.contactbox_recruit > a:hover{ background:rgb(51,134,197); }

/* リードコピー */
.leadcopy{
	font-size:var(--xl);
	font-weight:bold;
	color:var(--main);
	text-align:center;
	padding:0 20px;
}

/* リードビジュアル */
.leadvis{
	display:flex;
	flex-wrap:wrap;
	padding:20px 0 40px;
	align-items:center;
}
.leadvis > *{ flex-basis:50%; }
.leadvis > figure > *{
	max-width:600px;
	padding:0 var(--gap);
	margin:0 0 0 auto;
}
.leadvis > div{ background:rgb(229,245,252); }
.leadvis > div > *{
	max-width:600px;
	padding:var(--gap);
}
@media screen and (max-width: 768px){
	.leadvis{ display:block; }
	.leadvis > figure > *{ padding:var(--gap); }
}

/* リボン */
.ribbon > img{ max-width:300px; }
@media screen and (max-width: 768px){
	.ribbon > img{ max-width:200px; }
}

/* 角丸 */
.radius10{ border-radius:10px; }
.radius20{ border-radius:20px; }
.radius30{ border-radius:30px; }
.radius40{ border-radius:40px; }

/* 中央寄せ説明文 */
.summary{
	text-align:center;
	margin:20px 0;
}
@media screen and (max-width: 960px){
	.summary{ text-align:justify; }
}

/* 商品ラインナップナビゲーション */
.lineupnav > h2{ background:rgb(229,239,247); }
.lineupnav > div{
	overflow-x:scroll;
	padding:20px 10px 10px;
	background:rgb(229,239,247);
	position:relative;
}
.lineupnav > div > ul{
	display:flex;
	gap:10px;
	max-width:1200px;
	margin:0 auto;
	padding:0 10px;
	justify-content:center;
}
.lineupnav > div > ul > li:last-child{ border-right:20px solid rgba(0,0,0,0); }
.lineupnav > div > ul > li > a{
	display:block;
	width:160px;
	padding:10px;
	border-radius:20px;
}
.lineupnav > div > ul > li > a:hover{ background:white; }
.lineupnav > div > ul > li > a > p{
	font-size:var(--s);
	color:var(--main);
	font-weight:bold;
	text-align:center;
}
.lineupnav + .buttons{
	margin-top:-60px;
	padding-bottom:40px;
}
@media screen and (max-width: 1200px){
	.lineupnav > div > ul{ justify-content:flex-start; }
}
@media screen and (max-width: 960px){
	.lineupnav + .buttons{ margin-top:-50px; }
}
@media screen and (max-width: 768px){
	.lineupnav + .buttons{ margin-top:-30px; }
}

/* マウスオーバー切替画像 */
.ovimg{ position:relative; }
.ovimg > :first-child{
	position:relative;
	top:0;
	right:0;
	left:0;
	margin:0;
}
.ovimg > :last-child{
	position:absolute;
	top:0;
	right:0;
	left:0;
	margin:0;
	opacity:0;
}
a:hover .ovimg > :last-child{ opacity:1; }

/* 画像3点切り替え(WIDE-PC-SP) */
.tripoints > img{
	max-width:none;
	width:100%;
}
.tripoints > img:nth-child(2),
.tripoints > img:nth-child(3){ display:none; }
@media screen and (max-width: 1200px){
	.tripoints > img:nth-child(1){ display:none; }
	.tripoints > img:nth-child(2){ display:block; }
}
@media screen and (max-width: 768px){
	.tripoints > img:nth-child(2){ display:none; }
	.tripoints > img:nth-child(3){ display:block; }
}

/**
 * スポット：TOPページ
----------------------------------------------------------------*/
/* メインビジュアル */
#spot_index_mvis{ position:relative; }
#spot_index_mvis > .video{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:0;
	z-index:-1;
	overflow:hidden;
}
#spot_index_mvis > footer{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:-2;
}
#spot_index_mvis > .video > video{ width:100vw; }
@media screen and (max-width: 768px){
	#spot_index_mvis > .video > video{
		width:auto;
		height:calc(100vw / 3 * 4);
		margin:0 auto;
		position:absolute;
		left:50%;
		top:0;
		bottom:0;
		margin-left:calc(-100vw / 3 * 4 * 1.7778 / 2);
		display:block;
	}
}

/* ピックアップ記事 */
#spot_index_pickups > .flex{ align-items:stretch; }
#spot_index_pickups > .flex > section:first-child{ flex-basis:calc(var(--basis) / 2 + var(--gap)); }
#spot_index_pickups > .flex > section > a{
	display:block;
	margin:-20px;
	padding:20px;
	border-radius:20px;
	height:calc(100% + var(--gap));
}
#spot_index_pickups > .flex > section > a:hover{ background:rgb(229,239,247); }
#spot_index_pickups > .flex > section > a > img{
	border-radius:10px;
	object-fit:cover;
	width:100%;
	aspect-ratio:1 / 1;
}
#spot_index_pickups > .flex > section:first-child > a > img{
	width:100%;
	height:250px;
}

#spot_index_pickups > .flex > section > a > h3{
	font-weight:bold;
	font-size:var(--s);
	color:var(--main);
	margin-top:10px;
}
@media screen and (max-width: 1200px){
	#spot_index_pickups > .flex > section:first-child > a > img{ height:20vw; }
}
@media screen and (max-width: 768px){
	#spot_index_pickups > .flex > section:first-child{ flex-basis:100%; }
	#spot_index_pickups > .flex > section:first-child > a > img{
		aspect-ratio:2 / 1;
		height:auto;
	}
	#spot_index_pickups > .flex > section > a{
		margin:calc(var(--gap) / -2);
		padding:calc(var(--gap) / 2);
		border-radius:10px;
		height:calc(100% + var(--gap));
	}
}

/* 新着情報 */
#spot_index_topics{
	padding:20px 0;
	background:rgb(253,250,236);
}
#spot_index_topics > .base > .flex > header > div > img{
	max-width:190px;
	margin:0;
}
#spot_index_topics > .base > .flex > header > div > h2{
	font-size:var(--s);
	letter-spacing:.2em;
	margin:4px 0 10px;
}
#spot_index_topics > .base > .flex > header > a{
	border:1px solid var(--brown);
	color:var(--brown);
	font-size:var(--m);
	font-weight:bold;
	padding:10px 20px;
	width:200px;
	border-radius:30px;
	display:inline-block;
	text-align:center;
	letter-spacing:.1em;
}
#spot_index_topics > .base > .flex > header > a:hover{
	background:var(--brown);
	color:white;
}
#spot_index_topics > .base > .flex > ul > li > a{
	display:flex;
	border-top:2px dotted var(--gray);
	padding:10px 0;
}
#spot_index_topics > .base > .flex > ul > li > a:hover{ background:rgb(252,246,217); }
#spot_index_topics > .base > .flex > ul > li:last-child > a{ border-bottom:2px dotted var(--gray); }
#spot_index_topics > .base > .flex > ul > li > a > time{
	background:var(--milk);
	color:var(--brown);
	width:120px;
	margin-right:15px;
	text-align:center;
	padding:0 10px;
	border-radius:20px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
#spot_index_topics > .base > .flex > ul > li > a > p{
	font-size:var(--m);
	font-weight:bold;
}
@media screen and (max-width: 768px){
	#spot_index_topics > .base > .flex > header{
		display:flex;
		justify-content:space-between;
		gap:20px;
		align-items:flex-start;
	}
}

/**
 * スポット：商品詳細
----------------------------------------------------------------*/
#productlist > section > a{
	position:relative;
	display:block;
	padding:var(--gap-half);
	margin:calc(var(--gap-half) * -1);
	border-radius:20px;
}
#productlist > section > a:hover{
	background:white;
	background:rgba(126,206,244,0.2);
}
#productlist > section.deliverable > a::before{
	content:'宅配\A専用';
	font-size:16px;
	line-height:20px;
	padding:20px;
	white-space:pre;
	background:var(--milk);
	color:var(--brown);
	font-weight:bold;
	text-align:center;
	width:80px;
	height:80px;
	border-radius:50%;
	display:block;
	top:-10px;
	right:-10px;
	position:absolute;
	z-index:1;
}
#productlist > section.deliverable > a:hover::before{
	background:var(--brown);
	color:white;
}
#productlist > section > a > .unit{
	font-size:var(--m);
	text-align:center;
	padding:2px 10px;
	background:var(--main);
	border-radius:20px;
	color:white;
	font-weight:bold;
	margin:20px 0 10px;
}
#productlist > section > a > .h4{ margin:0; }
#productlist > section > a > .expirydate{ font-size:var(--s); }
#productlist > section > a > .expirydate > span{
	font-size:var(--xs);
	color:white;
	background:var(--black);
	text-align:center;
	padding:2px 10px;
	border-radius:10px;
	margin-right:3px;
}
#productlist > section > a > .cont{ font-size:var(--xxs); }
#productlist > section > a > .cont p{ text-align:left; }
@media screen and (max-width: 768px){
	#productlist > section > a{
		padding:var(--gap-quarter);
		margin:calc(var(--gap-quarter) * -1);
	}
}

/* ダイアログ */
dialog{
	background:white;
	padding:20px;
	border-radius:20px;
	max-width:768px;
}
dialog .close{
	position:absolute;
	top:20px;
	right:20px;
	background:#ccc url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/close.png") scroll no-repeat center center / contain;
	width:40px;
	height:40px;
}
dialog .close:hover{ background-color:#555; }
@media screen and (max-width: 808px){
	dialog{ max-width:revert; }
}
@media screen and (max-width: 768px){
	dialog > .table > table,
	dialog > .table > table tbody,
	dialog > .table > table tr,
	dialog > .table > table th,
	dialog > .table > table td{ display:block; }
	dialog > .table.-hborder > table tr > *{
		padding-right:0;
		padding-left:0;
	}
	dialog > .table.-hborder > table th{ padding-bottom:0; }
	dialog > .table.-hborder > table td{
		border-top-width:0;
		padding-top:0;
	}
	dialog > .table.-hborder > table tr:last-child > *{ border-bottom-width:0; }
	dialog > .table.-hborder > table tr:last-child > td:last-child{ border-bottom-width:1px; }
}

/**
 * スポット：大内山牛乳ってなに？
----------------------------------------------------------------*/
/* レイアウト */
.spot_whats > section.half{
	margin:var(--gap-double) var(--gap);
	position:relative;
	--bitting:5%;
}
.spot_whats > section.half > div{ width:50%; }
.spot_whats > section.half > figure{
	width:50%;
	position:absolute;
	top:0;
	bottom:0;
	left:calc(50% - var(--bitting));
	display:flex;
	align-items:center;
}
.spot_whats > section.half > figure > img{
	width:calc(100% + var(--bitting) * 2 * 2);
	max-width:none;
}
.spot_whats > section.half.shrink{ margin:300px var(--gap); }
@media screen and (max-width: 1200px){
	.spot_whats{ overflow-x:hidden; }
}
@media screen and (max-width: 960px){
	.spot_whats > section.half{ --bitting:10%; }
	.spot_whats > section.half > figure > img{ width:calc(100% + var(--bitting) * 2 * 4); }
}
@media screen and (max-width: 768px){
	.spot_whats > section.half.shrink{ margin:50px var(--gap); }
	.spot_whats > section.half > div{ width:70%; }
	.spot_whats > section.half > figure{ left:calc(50% - var(--bitting)); }
}

/* レイアウト反転 */
.spot_whats > section.half:nth-child(even) > div{ margin-left:50%; }
.spot_whats > section.half:nth-child(even) > figure{ left:calc(var(--bitting) * -1); }
@media screen and (max-width: 768px){
	.spot_whats > section.half:nth-child(even) > div{ margin-left:30%; }
	.spot_whats > section.half:nth-child(even) > figure{ left:calc(var(--bitting) * -3); }
}

/* ワイド画像 */
.spot_whats > section.wide{
	margin:var(--gap-double) var(--gap);
}
.spot_whats > section.wide > div > .flex > figure > img{
	margin:-80px -120px -80px 0;
	max-width:calc(100% + 100px);
}
.spot_whats > section.wide > div > .flex > figure > img{ margin-top:-50px; }
@media screen and (max-width: 960px){
	.spot_whats > section.wide > div > .flex > figure > img{
		margin:0;
		max-width:100%;
	}
}

/* コンテンツ */
.spot_whats > section > div{
	background:rgba(253,250,236,0.9);
	border-radius:40px;
	padding:60px;
	position:relative;
	z-index:1;
}
@media screen and (max-width: 960px){
	.spot_whats > section > div{
		border-radius:30px;
		padding:40px;
	}
}

/* 丸ラベル */
.spot_whats > section > div > img{
	position:absolute;
	width:100px;
	height:100px;
	top:-40px;
	right:-20px;
	z-index:10;
}
@media screen and (max-width: 960px){
	.spot_whats > section > div > img{
		width:60px;
		height:60px;
		top:-10px;
		right:-20px;
	}
}
@media screen and (max-width: 768px){
	.spot_whats > section > div{
		border-radius:30px;
		padding:30px;
	}
}

/* ヘッダ */
.spot_whats > section header > img{
	max-width:384px;
	margin:0;
}
.spot_whats > section header > h2,
.spot_whats > section header > h3{
	font-size:var(--l);
	line-height:1.3;
	font-weight:bold;
	padding-top:4px;
}
.spot_whats > section header > h2::after,
.spot_whats > section header > h3::after{
	content:'';
	display:block;
	width:80px;
	height:4px;
	background:var(--sub);
	margin:20px 0;
}
@media screen and (max-width: 520px){
	.spot_whats > section header > img{ max-width:100%; }
}

/* 数値 */
.spot_whats_param{
	display:flex;
	flex-wrap:wrap;
	margin:20px 0;
	align-items:center;
}
.spot_whats_param > dt{ width:50px; }
.spot_whats_param > dd{
	width:calc(100% - 50px);
	font-size:var(--s);
	font-weight:bold;
	line-height:1.5;
	padding:4px 0 4px 10px;
}
.spot_whats_param > dd > strong{
	font-size:var(--xl);
	color:var(--main);
}

/* オール三重体制：フードマイレージ */
#spot_whats_allmie_foodmileage{
	border:3px solid var(--main);
	background:white;
	border-radius:15px;
	margin-top:20px;
}
#spot_whats_allmie_foodmileage > h3{
	background:var(--main);
	color:white;
	font-weight:bold;
	text-align:center;
	line-height:30px;
	padding:4px 10px;
	border-radius:10px 10px 0 0;
}
#spot_whats_allmie_foodmileage > h3 > img{
	margin:0;
	display:inline-block;
	width:30px;
}
#spot_whats_allmie_foodmileage > p{ padding:10px; }

/**
 * スポット：大内山酪農について
----------------------------------------------------------------*/
/* アクセス */
#spot_about_access_route{
	display:flex;
	max-width:728px;
	margin:0 auto;
	flex-wrap:wrap;
	margin-bottom:20px;
}
#spot_about_access_route > dt{
	width:216px;
	font-size:var(--l);
	background:var(--main);
	color:white;
	text-align:center;
	padding:4px 10px;
	margin-bottom:10px;
}
#spot_about_access_route > dd{
	width:512px;
	font-size:var(--l);
	font-weight:bold;
	padding:4px 10px;
	margin-bottom:10px;
	padding-left:10px;
}

/* 組合の歩み */
#spot_about_history th{
	border-right:1px solid var(--gray);
	padding-right:20px;
	width:100px;
}
#spot_about_history td{ padding-left:20px; }
@media screen and (max-width: 768px){
	#spot_about_history th{ width:90px; }
	#spot_about_history *{
		padding-top:5px;
		padding-bottom:5px;
	}
}

/**
 * スポット：大内山牛乳ができるまで
----------------------------------------------------------------*/
/* 映像 */
#spot_process_movie{
	background:rgb(251,244,207) url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/process/bg_movie.png") scroll no-repeat center center;
	height:705px;
	position:relative;
}
#spot_process_movie > header > p{
	text-align:center;
	padding:0 20px;
	font-size:var(--m);
	padding-top:60px;
}
#spot_process_movie > header > h2{
	max-width:370px;
	margin:0 auto;
}
#spot_process_movie > .thumb{
	position:relative;
	max-width:800px;
	aspect-ratio:16 / 9;
	margin:0 auto;
}
#spot_process_movie > .thumb > div{
	position:relative;
	border:30px solid var(--main);
	border-radius:40% / 35%;
	overflow:hidden;
	position:relative;
	cursor:pointer;
}
#spot_process_movie > .thumb > div::after{
	display:block;
	content:'';
	margin:auto;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:80px;
	height:80px;
	background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/youtube.png") scroll no-repeat center center / contain;
	transition:width .4s, height .4s;
}
#spot_process_movie > .thumb > div:hover{ border-color:var(--main-hover); }
#spot_process_movie > .thumb > div:hover::after{
	width:100px;
	height:100px;
}
#spot_process_movie > .thumb > img{
	width:160px;
	position:absolute;
	top:-40px;
	left:50px;
	z-index:1;
}
#spot_process_movie > .dialog{
	background:rgba(0,0,0,.9);
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:10000;
	padding:20px;
	display:none;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
#spot_process_movie > .dialog.active{ display:flex; }
#spot_process_movie > .dialog > div{
	max-width:768px;
	width:100%;
}
@media screen and (max-width: 840px){
	#spot_process_movie > header{ padding:0 20px; }
	#spot_process_movie > .thumb{ margin:40px 20px 0; }
	#spot_process_movie > .thumb > div{ border-width:3.6vw; }
	#spot_process_movie > .thumb > div::after{
		width:9.5vw;
		height:9.5vw;
	}
	#spot_process_movie > .thumb > div:hover::after{
		width:11.9vw;
		height:11.9vw;
	}
	#spot_process_movie > .thumb > img{
		width:19vw;
		top:-4.76vw;
		left:5.95vw;
	}
}
@media screen and (max-width: 768px){
	#spot_process_movie{
		background-image:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/process/bg_movie_sp.png");
		height:auto;
		padding-bottom:60px;
	}
	#spot_process_movie > .thumb{ margin:60px 20px 0; }
}

/**
 * スポット：宅配サービス
----------------------------------------------------------------*/
/* メインビジュアル */
#spot_delivery_mvis{ padding-bottom:40px; }
#spot_delivery_mvis > .base > div{
	background:rgba(126,206,244,0.2);
	border-radius:10px;
	padding:var(--gap);
	max-width:728px;
	margin:0 auto;
}
#spot_delivery_mvis > .base > div > h2{
	font-size:var(--xl);
	color:var(--main);
	font-weight:bold;
	line-height:1.4;
	padding-bottom:10px;
}
#spot_delivery_mvis > .base > div > p{ font-size:var(--m); }
@media screen and (max-width: 768px){
	#spot_delivery_mvis > .base > div{ margin:0 20px; }
}

/* 宅配商品ラインナップ */
#spot_delivery_lineup{
	border-top:5px solid var(--main);
	border-bottom:5px solid var(--main);
	background:rgb(229,239,247);
}

/**
 * スポット：販売店
----------------------------------------------------------------*/
.storeset.hashp{
	padding-right:70px;
	position:relative;
}
.storeset > img{ margin-bottom:20px; }
.storeset > header > p{
	display:inline-block;
	background:var(--main);
	color:white;
	font-size:var(--s);
	font-weight:bold;
	padding:0 10px;
}
.storeset > header > h2,
.storeset > header > h3,
.storeset > header > h4,
.storeset > header > h5,
.storeset > header > h6{
	display:inline-block;
	font-size:var(--m);
	font-weight:bold;
}
.storeset > a{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	width:50px;
	height:25px;
	font-weight:bold;
	color:var(--brown);
	background:var(--milk);
	text-align:center;
	margin:auto 0;
}
.storeset > a:hover{
	color:var(--milk);
	background:var(--brown);
}
.storeset + figure{
	position:relative;
	z-index:1;
	margin:40px 0 0 -80px;
}
.storeset + figure > div > img{ border:3px solid white; }
@media screen and (max-width: 960px){
	.storeset + figure{ margin:0; }
}

/**
 * スポット：お問い合わせフォーム(未使用)
----------------------------------------------------------------*/
#spot_contact{ padding:20px 0; }
#spot_contact:not(.hasestimate) .estimate{ display:none; }

/* 入力部品 */
#spot_contactform label:not(.inline){ display:block; }
#spot_contactform [type="text"],
#spot_contactform [type="tel"],
#spot_contactform [type="email"],
#spot_contactform textarea{
	background:white;
	font-size:var(--m);
}
#spot_contactform [name="estimate"]{ font-size:var(--xs); }
#spot_contactform.invalid .formtxt{ vertical-align:top; }
@media screen and (max-width: 768px){
	#spot_contactform .em-mid{ width:100%; }
}

/* 送信ボタン */
#spot_contactform .wpcf7-list-item{ margin-left:0; }
#spot_contactform .submit{ text-align:center; }
#spot_contactform .submit > .wpcf7-spinner{ margin-top:20px; }
#spot_contactform .submit > [type="submit"]{
	width:240px;
	display:inline-block;
	padding:var(--gap-quarter) var(--gap-half);
	background:var(--main);
	color:white;
	position:relative;
	letter-spacing:.2em;
	text-align:center;
	vertical-align:middle;
	font-size:var(--s);
	border-radius:0;
	letter-spacing:0;
	border:none;
}
#spot_contactform .submit > [type="submit"]:hover{ background:var(--sub); }

/**
 * スポット：よくあるご質問
----------------------------------------------------------------*/
#spot_faqs{ padding:40px 0; }
#spot_faqs > .alone > section{ margin:40px 0; }
#spot_faqs > .alone > section > h2{
	background:var(--sub);
	color:white;
	font-size:var(--l);
	font-weight:bold;
	padding:15px 30px 15px 110px;
	border-radius:40px;
	position:relative;
	line-height:1.4;
}
#spot_faqs > .alone > section > h2::before{
	background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/interface/icons/question.png") scroll no-repeat center center / contain;
	content:'';
	display:block;
	width:100px;
	height:100px;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	left:0;
}
#spot_faqs > .alone > section > div{
	background:rgb(253,250,236);
	margin:-20px 40px 0;
	border-radius:0 0 40px 40px;
	padding:60px 40px 40px;
}
@media screen and (max-width: 960px){
	#spot_faqs > .alone > section > div{
		margin:-20px 20px;
		padding:40px 20px 20px;
	}
}

/**
 * スポット：工場見学のご案内
----------------------------------------------------------------*/
/* メインパネル */
#spot_tour_mainpanel{ margin-top:-70px; }
#spot_tour_mainpanel > .base > figure > img{ border:4px solid white; }
@media screen and (max-width: 768px){
	#spot_tour_mainpanel{ margin-top:-40px; }
}

/* コロナ警告 */
#spot_tour_caution{
	background:crimson;
	color:white;
	font-size:var(--m);
	font-weight:bold;
	text-align:center;
	padding:15px var(--gap);
}

/* 詳細 */
#spot_tour_summary .table tr > *{ padding:10px 20px; }
#spot_tour_summary .table tr:not(:last-child) > *{ border-bottom:1px solid white; }
#spot_tour_summary .table th{ background:rgba(126,206,244,0.2); }
#spot_tour_summary .table td{ background:rgba(255,255,255,.5); }

/* 企画 */
#spot_tour_project{
	background:var(--main);
	color:white;
	padding:20px;
	margin-bottom:20px;
	border-radius:15px;
}
#spot_tour_project > h2{
	font-size:var(--xl);
	text-align:center;
	margin-bottom:10px;
	font-weight:bold;
}
#spot_tour_project > footer{
	border:1px solid white;
	background:rgba(255,255,255,.1);
	margin-top:20px;
	text-align:center;
	font-weight:bold;
	font-size:var(--m);
	padding:20px;
	border-radius:10px;
}
#spot_tour_project > footer > p{ text-align:center; }
#spot_tour_project > footer > a{ font-size:var(--xl); }
#spot_tour_project > footer > a:hover{ color:rgb(229,245,252); }

/**
 * 採用情報
----------------------------------------------------------------*/
/* コンテンツ */
#spot_recruit_content{ border-bottom:10px solid var(--main); }

/* ギャラリー */
#spot_recruit_gallery{
	max-width:1920px;
	margin:0 auto;
}
#spot_recruit_gallery a{
	display:block;
	box-sizing:border-box;
	position:relative;
}
#spot_recruit_gallery a:hover{ opacity:.7; }
#spot_recruit_gallery a::after{
	position:absolute;
	content:'';
	display:block;
}
#spot_recruit_gallery > div > figure > :first-child > a::after,
#spot_recruit_gallery > div > figure > :first-child > div > a::after{
	border-bottom:6px solid white;
	left:0;
	right:0;
	bottom:0;
}
#spot_recruit_gallery > div > figure > :first-child > a::after,
#spot_recruit_gallery > div > figure > :last-child > a:not(:last-child)::after{
	border-right:6px solid white;
	top:0;
	bottom:0;
	right:0;
}
@media screen and (max-width: 768px){
	#spot_recruit_gallery > div > figure > :first-child > div > a:first-child::after{
		border-right:6px solid white;
		top:0;
		bottom:0;
		right:0;
	}
}

/**
 * みえぺこ
----------------------------------------------------------------*/
#spot_miepeco_mvis{ border-top:10px solid white; }
.bg.-dottedyellow{ background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/miepeco/bg_dotted_yellow.png") repeat center center; }
.bg.-dottedwater{ background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/miepeco/bg_dotted_water.png") repeat center center; }
@media screen and (max-width: 768px){
	#spot_miepeco_mvis{ border-top-width:5px; }
}
.spot_miepeco_title > h1{
	font-size:var(--xl);
	padding:20px;
	background:var(--main);
	color:white;
	text-align:center;
	font-weight:bold;
	letter-spacing:.1em;
}
.miepeco_entry{
	background:#eb6161;
	border-radius:35.5px;
}
.miepeco_entry:hover{
	background:var(--main);
	opacity:1;
}
#spot_miepeco_campaign_campaign > .base > .alone{
	margin-top:0;
	margin-bottom:0;
	padding:0 0 60px 0;
}
.pecovi{
	display:block;
	border-radius:20px;
	padding:10px;
	margin:-10px;
	position:relative;
}
a.pecovi:hover{ background:rgba(255,255,255,.5); }
.pecovi > p{
	position:absolute;
	top:calc(-26px + 10px);
	height:26px;
	line-height:26px;
	background:#eb6161;
	z-index:1;
	left:0;
	right:0;
	width:50px;
	margin:0 auto;
	color:white;
	font-weight:bold;
	text-align:center;
}
.pecovi > p::before,
.pecovi > p::after{
	content:'';
	display:inline-block;
	position:absolute;
	top:0;
	width:20px;
	height:100%;
}
.pecovi > p::before{
	background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/miepeco/interface_label_left_top.png") no-repeat top right / contain;
	left:-20px;
}
.pecovi > p::after{
	background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/miepeco/interface_label_right_top.png") no-repeat top left / contain;
	right:-20px;
}
.pecovi figure{
	border-radius:10px;
	overflow:hidden;
	position:relative;
	margin-bottom:6px;
	background:black;
}
.pecovi figure::before{
	width:70px;
	height:70px;
	content:'';
	margin:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	background:#eb6161 url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/miepeco/interface_play.png") no-repeat center center / cover;
	border-radius:50%;
	z-index:1;
}
a.pecovi:hover > figure > img{ opacity:.7; }
a.pecovi:hover > figure::before{ background-color:#d43232; }
.pecovi > a:hover > figure > img{ opacity:.7; }
.pecovi > a:hover > figure::before{ background-color:#d43232; }
.pecovi > header{
	line-height:1.4;
	margin-bottom:10px;
}
.pecovi > header > p{
	font-weight:bold;
	text-align:justify;
}
.pecovi > header > h3{
	color:var(--main);
	font-size:var(--m);
	font-weight:bold;
	text-align:justify;
}
.pecovi > header > time{
	font-size:var(--xs);
	color:#aaa;
}
.pecovi > article{
	font-size:var(--xs);
	margin-bottom:10px;
}
.pecovi > footer{
	background:rgb(253,250,236);
	border-radius:10px;
	padding:0 15px 15px;
	line-height:1.4;
}
a.pecovi:hover > footer{ background:rgb(252,246,217); }
.pecovi > footer > header{
	background:#eb6161;
	color:white;
	font-weight:bold;
	font-size:var(--m);
	position:relative;
	width:120px;
	margin:0 auto 10px;
	text-align:center;
}
.pecovi > footer > header::before,
.pecovi > footer > header::after{
	content:'';
	display:inline-block;
	position:absolute;
	top:0;
	width:32px;
	height:100%;
}
.pecovi > footer > header::before{
	background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/miepeco/interface_label_left_bottom.png") no-repeat top right / contain;
	left:-32px;
}
.pecovi > footer > header::after{
	background:url("https://ouchiyama-milk.com/wp-content/themes/ouchiyamamilk/image/article/miepeco/interface_label_right_bottom.png") no-repeat top left / contain;
	right:-32px;
}
.pecovi > footer > section > h4{
	color:var(--main);
	font-size:var(--m);
	text-align:justify;
	font-weight:bold;
}
.pecovi > footer > section > p{ text-align:justify; }
.pecovi > footer > section + section{ padding-top:15px; }
#spot_miepeco_index_pecovis{ padding-top:20px; }
#spot_miepeco_index_pecovis > ul > li{ width:384px; }
#miepecoform{ color:#4f320b; }
#miepecoform > section > table > tbody > tr > th{ width:200px; }
#miepecoform > section > table > tbody > tr > *{ padding:5px 0; }
@media screen and (max-width: 768px){
	#spot_miepeco_index_pecovis > ul > li{ width:280px; }
	#miepecoform > section > table,
	#miepecoform > section > table > tbody,
	#miepecoform > section > table > tbody > tr,
	#miepecoform > section > table > tbody > tr > *{ display:block; }
	#miepecoform > section > table > tbody > tr > th{ width:auto; }
}
#miepecoform input[type="text"],
#miepecoform input[type="email"],
#miepecoform input[type="tel"],
#miepecoform textarea{
	background:white;
	margin-bottom:5px;
}
#miepecoform h4{
	font-weight:bold;
	margin-bottom:10px;
}
#miepecoform .req::before,
#miepecoform .any::before{
	display:inline-block;
	margin-right:4px;
	color:white;
	font-size:var(--xs);
	vertical-align:middle;
	font-weight:bold;
	text-align:center;
	width:60px;
	padding:0 10px;
}
#miepecoform .req::before{
	content:'必須';
	background:#eb6161;
}
#miepecoform .any::before{
	content:'任意';
	background:var(--sub);
}
#miepecoform .terms{
	overflow-y:scroll;
	height:200px;
	font-size:var(--xxs);
	background:white;
	padding:10px;
}
#miepecoform > section > section{ margin-bottom:20px; }
#miepecoform > footer,
#miepecoform > footer p{ text-align:center; }
#miepecoform input[type="button"],
#miepecoform input[type="submit"]{
	font-size:var(--l);
	font-weight:bold;
	width:200px;
	border-radius:2em;
	text-align:center;
	padding:10px;
}
@media screen and (max-width: 768px){
	#miepecoform input[type="button"],
	#miepecoform input[type="submit"]{
		display:block;
		margin:5px auto;
	}
}
.wpcf7-list-item{ margin:0 1em 0 0 !important; }
.richform label:not(.togglebox) > [type="checkbox"] + span::before{ background:white; }
.richform label:not(.togglebox) > [type="radio"] + span::before{ background:white; }
.pecopre{
	line-height:1.4;
	width:256px;
}
.pecopre > figure{ margin-bottom:10px; }
.pecopre > header > p{
	display:inline-block;
	color:white;
	background:var(--main);
	padding:0 1em;
	border-radius:1em;
	margin-right:5px;
	font-size:var(--xxs);
}
.pecopre > header > time{
	font-size:var(--xxs);
	color:#999;
}
.pecopre > h4{
	font-size:var(--m);
	color:var(--main);
	font-weight:bold;
}

/* タグ */
.tags > *{
	background:var(--main);
	line-height:1.4;
	display:inline-block;
	padding:0 10px;
	border-radius:1em;
	color:white;
	font-size:var(--xs);
	font-weight:bold;
}
.tags > a:hover{ background:var(--sub); }

/**
 * リコール
----------------------------------------------------------------*/
.recall{
	max-width:768px;
	margin:0 auto 20px;
}
.recall > a{
	display:block;
	padding:20px 30px 20px 20px;
	background:rgb(242,250,253);
	border:1px solid rgb(0,104,183);
	position:relative;
	color:rgb(0,104,183);
}
.recall > a::after{
	content:'>';
	width:10px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
	right:10px;
	top:0;
	bottom:0;
	margin:auto 0;
	position:absolute;
	font-size:20px;
}
.recall > a:hover{
	background:rgb(0,104,183);
	color:white;
}
.recall > a > h2{
	font-weight:bold;
	font-size:var(--l);
}

/**
 * ContactFormカスタマイズ
----------------------------------------------------------------*/
/* メッセージ：成功時 */
.wpcf7 form.sent .wpcf7-response-output{
	background:#d5edda;
	color:#185626;
	border:1px solid #c4e5cc !important;
	padding:10px
}

/* メッセージ：失敗時 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
	background:#f7d7da;
	color:#711d26;
	border:1px solid #f4c6cb !important;
	padding:10px
}

/* 個別：エラー文 */
.wpcf7-not-valid-tip{
	color:red !important;
	margin-top:5px;
	font-size:12px !important;
}

/**
 * 投稿コンテンツ
----------------------------------------------------------------*/
#post{ padding:20px var(--gap) 80px; }
#post > *{
	max-width:1024px;
	margin:0 auto;
}
#post .wp-block-columns{
	padding:40px 20px;
	box-sizing:border-box;
}
#post_post{
	padding:20px;
}
#post_post h2{
	font-size:30px;
	padding-top:20px;
}
#post_post h3{
	font-size:16px;
	padding-top:10px;
	font-weight:bold;
	color:var(--main);
}
#post_post table tr > td:first-child{ min-width:120px; }
#post_post table tr > td{ padding:10px; }
@media screen and (max-width: 768px){
	#post_post h2{ font-size:18px; }
}

.wp-block-gallery{
	display:flex;
	flex-wrap:wrap;
}
.wp-block-gallery > *{ flex-basis:33.3333%; }
@media screen and (max-width: 768px){
	.wp-block-gallery > *{ flex-basis:50%; }
}
.topics p:empty{
	padding-top:20px;
}
.topics .wp-block-image,
.topics .wp-block-gallery{ margin:20px 0; }
.topics .wp-block-table{ margin:20px 0; }
.topics .wp-block-table figcaption{
	margin:5px 0;
	font-size:85%;
	color:#666;
}
.topics .wp-block-table td{
	border:none;
	border-top:1px solid #ccc;
}
.topics .wp-block-table tr:last-child > td{ border-bottom:1px solid #ccc; }
.topics .wp-block-table td:first-child{ background:#f5f5f5; }
.topics h2{
font-size:var(--xl);
font-weight:bold;
color:var(--main);
}
.topics h3{
font-size:var(--l);
font-weight:bold;
margin:40px 0 20px;
}
.topics h4{
font-size:var(--m);
font-weight:bold;
margin:40px 0 20px;
}
.topics h5{
font-size:var(--s);
font-weight:bold;
margin:20px 0 10px;
}
.topics h6{
font-size:var(--s);
font-weight:bold;
margin:20px 0 10px;
}
.topics .wp-block-image img{ margin:0; }
.topics a:hover{ opacity:.7; }