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

/*RESET*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {
	line-height:1.5;
	text-decoration: underline rgba(255,255,255,0);

}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

/* change colours to suit your needs */
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

/* change colours to suit your needs */
mark {
	background-color:#ff9;
	color:#000; 
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

/* change border colour to suit your needs */
hr {
	display:block;
	height:1px;
	border:0;   
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

input, select {
	vertical-align:middle;
}


/*STYLE*/

*{
	font-family:"ヒラギノ丸ゴ ProN", sans-serif;
	line-height:1.5;
}

body{
	background: #ffffff;
background-attachment: fixed;
}

#contents{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	background: #ffffff;
}

#contents img{
	width: 100%;
	vertical-align: middle;
}

#contents {
	font-size: 1.0em;
	line-height: 1.2;
}


/*font-size*/

.font-L{
	font-size: 1.4em;
}

.font-M{
	font-size: 1em;
}

.font-S{
	font-size: 0.9em;
}

p.ls_S{
	letter-spacing: -0.04em;
}

.txt_C{
	text-align: center;
}

.font_red{
	color: #DD4040;
}

.productNo span,
.productNo strong{
	font-weight: bold;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝",Meiryo, serif;
	vertical-align: top;
	display: inline-block;
}

.productNo span{
	font-size: 1.3em;
	border: 2px solid #eb6d32;
	border-radius: 3px;
	color: #eb6d32;
	margin: 0 8px;
	padding: 2px 5px;
}

.productNo strong{
	font-size: 1.8em;
}

/*padding*/

.pad40{
	padding: 0 5%;
}

.pad30{
	padding: 0 3%;
}

.pad40 img{
	max-width: 670px;
	margin: 0 auto;
}

.pad_t_80{
	padding-top: 80px;
}

.pad_t_60{
	padding-top: 60px;
}

.pad_t_40{
	padding-top: 40px;
}

.pad_t_30{
	padding-top: 30px;
}

.pad_b_40{
	padding-bottom: 40px;
}

.pad_b_60{
	padding-bottom: 60px;
}

.pad_b_80{
	padding-bottom: 80px;
}

.pad_b_100{
	padding-bottom: 100px;
}

.pad_li{
padding:0px 15px 5px;
}



/*margin*/

.mar40{
	margin: 0 40px;
}

.mar_t_60{
	margin-top: 60px;
}

.mar_t_40{
	margin-top: 40px;
}

.mar_b_120{
	margin-bottom: 120px;
}

.mar_b_100{
	margin-bottom: 100px;
}

.mar_b_80{
	margin-bottom: 80px;
}

.mar_b_60{
	margin-bottom: 60px;
}

.mar_b_40{
	margin-bottom: 40px;
}

.mar_b_30{
	margin-bottom: 30px;
}

.mar_b_20{
	margin-bottom: 20px;
}

.mar_b_15{
	margin-bottom: 15px;
}

.mar_b_10{
	margin-bottom: 10px;
}


/*bg*/

.bg_wood{
	background: url("../images/bg_wood.jpg");
}

.bg_green{
	background: url("../images/bg_green.jpg");
}

.bg_blue{
	background: url("../images/bg_blue.jpg");
}

.bg_cloth{
	background: url("../images/bg_cloth.jpg");
}

/*btn*/

.btn{
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btn:hover{
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}

.btn{
  -webkit-font-smoothing: antialiased;
}

.btn:hover{
  opacity: 0.80;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  filter:alpha(opacity=80);
  animation: wobbleud 0.5s linear infinite;
}

@keyframes wobbleud{
  0%{
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
  }

  25%{
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-o-transform: translateY(-5px);
	transform: translateY(-5px);
  }

  75%{
	-webkit-transform: translateY(5px);
	-ms-transform: translateY(5px);
	-o-transform: translateY(5px);
	transform: translateY(5px);
  }

  100%{
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
  }
}

/*#contents*/
#contents #sec_01 .pad30 p.font-L,
#contents #sec_03 .pad30 p.font-L{
	color: #4d8e14;
}

#contents #sec_02 p.txt_C{
	font-size: 1.4em;
}

#contents #sec_06,
#contents #sec_08,
#contents #sec_03 div.pad_b_60{
	text-align: center;
}

#contents #sec_03 div.pad_b_60 img{
	max-width: 675px;
}

#contents #sec_03 #info h3{
	margin-bottom: 10px;
	border-left: 5px solid #ea6e51;
	padding-left: 10px;
	font-size: 1.1em;
}

#contents #sec_03 #info ul{
	margin: 0 10px 30px 30px;
}

#contents #sec_03 #info li{
	margin-bottom: 10px;
}

#sec_03 table {
width: 100%;
max-width: 750px; /* 最大幅を制限 */
border: 0.5px solid #333;/* テーブル全体に枠線 */
border-collapse: collapse; /* セル間の線を重ねて表示 */
}
#sec_03 th, td {
padding: 2%; /* セルの上下左右に2%の余白を設定 */
vertical-align: middle;
}


#sec_12{
	background: #fffce0;
}

#sec_12 h2{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝",Meiryo, serif;
	font-size: 1.7em;
	text-align: center;
}

#sec_12 table{
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
}

#sec_12 table th,
#sec_12 table td{
	padding: 15px;
	border-bottom: 1px dotted #c0a78d;
}

#sec_12 table th{
	width: 30%;
}



#sec_qa{
background: #f7e6e1;
background: -moz-linear-gradient(top,  #f7e6e1 40%, #ffffff 100%);
background: -webkit-linear-gradient(top,  #f7e6e1 40%,#ffffff 100%);
background: linear-gradient(to bottom,  #f7e6e1 40%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7e6e1', endColorstr='#ffffff',GradientType=0 );
}

#sec_qa div{
	margin: 0 auto 30px;
	border-radius: 10px;
	background: #fff ;
	padding:40px 15px;
	text-align: center;
	max-width: 710px;
}

#sec_qa div img{
	max-width: 654px;
}

#contents #sec_open p{
	text-align: center;
	font-size: 18px;
}

#sec_oomugi{
  background: url("../images/oomugi_kenkou_bg.png");
  max-width: 100%;
  
}

/*footer*/

footer{
	background: #4d2312;
	color: #fff;
	padding-bottom: 20px;
}

footer p{
	text-align: center;
}

footer ul{
	display:flex;
	flex-direction: row;
	justify-content: center;
	padding: 30px;
}

footer li{
	padding: 0 10px;
	text-align: center;
}

footer a,
footer a:visited{
	color: #fff;
}

footer a:hover{
	text-decoration: none;
}

footer small{
	display: block;
	text-align: center;
}


@media (max-width: 750px) {
	#contents{
		font-size: 0.9em;
	}
	.br{
			display: block;
	}
	.font-L{
		font-size: 1.2em;
	}
	.font-M{
		font-size: 0.85em;
	}
	.font-S{
		font-size: 0.8em;
	}
	.pad_t_80{
		padding-top: 40px;
	}
	.pad_t_60{
		padding-top: 40px;
	}
	.pad_b_40{
		padding-bottom: 20px;
	}
	.pad_b_60{
		padding-bottom: 40px;
	}
	.pad_b_80{
		padding-bottom: 40px;
	}
	.pad_b_100{
		padding-bottom: 60px;
	}
	.mar_b_120{
		margin-bottom: 60px;
	}
	.mar_b_100{
		margin-bottom: 50px;
	}
	.mar_b_80{
		margin-bottom: 40px;
	}
	.mar_b_60{
		margin-bottom: 40px;
	}
	.mar_b_40{
		margin-bottom: 20px;
	}
	.mar_b_30{
		margin-bottom: 15px;
	}
	.mar_b_20,.mar_b_15{
		margin-bottom: 10px;
	}
	footer ul{
		display:flex;
		flex-direction: column;
		justify-content: center;
		padding: 30px;
	}
	footer li{
		padding: 5px 0
	}
	#contents #sec_02 p.txt_C{
		font-size: 1.2em;
	}
	.productNo span,.productNo strong{
		font-size:1.2em;
	}
	.doki-btn{
		width:100%;
	}
}

/*end*/

h3.css{
	margin-bottom: 10px;
	border-left: 5px solid #ea6e51;
	padding-left: 10px;
	font-size: 1.1em;
}

ul.css{
	margin: 0 10px 30px 30px;
}

li.css{
	margin-bottom: 10px;
}



.terrine-image {
    position: absolute;
    top: 0px; /* 必要に応じて位置を調整 */
    left: 0px; /* 必要に応じて位置を調整 */
    width: 5px; /* 必要に応じてサイズを調整 */
    height: 100px;
}

/*追従ボタン*/
#doki-btn{
  width: 100%;
  max-width: 750px;
  position:fixed;
/* 初めは非表示にしておく */
  display: none; 
  z-index:1;
  background:rgba(0, 0, 0, 0);
  border-radius:0px;
  text-decoration:none;
  bottom:0px;	/* 下から●pxの位置に配置 */
  animation-name:dokidoki;	/* アニメーション名の指定 */
  animation-delay:0s;		/* アニメーションの開始時間指定 */
  animation-duration: 2s;	/* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;
  /* アニメーションの動き（徐々に早く徐々に遅く）*/
  animation-iteration-count: infinite; /* アニメーションをループさせる */
}

/*footerまでスクロールしたら消す*/
.is-hidden {
  visibility: hidden;
  opacity: 0;
}

@keyframes dokidoki {
  0% {
  transform: scale(1);
  }
  45% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.1);
  }
  60% {
  transform: scale(1);
  }
  100% {
  transform: scale(1);
  }
}




/*常にぼよぼよ*/

/* ぼよぼよスタイル */
.bounce-btn {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  display: inline-block;
  animation: bounce 1s ease infinite;
}


/* アニメーションの基本設定 */
@keyframes bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-50px) scale(1.05);
  }
  50% {
    transform: translateY(0) scale(0.95);
  }
  70% {
    transform: translateY(-25px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* ぽちっと動かしたいanimationプロパティ */
.pochi {
  animation: pochi-animation 1.5s ease-in-out infinite;
}

/* ぽち@keyframesの用意 */
@keyframes pochi-animation {
	0% {transform:translateY(0px);}
	5%{transform:translateY(5px);}
	10%{transform:translateY(0px);}
	15%{transform:translateY(5px);}
	20%{transform:translateY(0px);}
	/*31～100%は0pxのままになる*/
  }

/* 各要素に異なる遅延時間を設定 */
.delay1 {
  animation-delay: 0s;
}

.delay2 {
  animation-delay: 0.5s;
}

.delay3 {
  animation-delay: 1s;
}


/* ポラロイド風にお客様の声 */

/* 画像を横並びにする */
.polaroid-container {
  display: flex; /* flexコンテナにする */
  flex-wrap: wrap; /* 縦に折り返す */
  justify-content: center; /* 中央揃え */
  gap: 3px; /* 画像間の隙間 */
}

.polaroid {
  position: relative;/* position: absolute;とセット */
  width: 45%;/* 画像の幅 */
  margin: 10px auto;/* 上下の空きと左右の空き */
  max-width:90%;/* 最大幅 */
  background-color:#eee;/* 背景色 */
  border: 10px solid #eee;/* フチの設定 */
  border-bottom-width: 100px;/*下のフチ幅*/
  box-shadow: 3px 3px 3px #777;/* 影の設定 */
}
.polaroid-moji {
  position: absolute;/* width: 100%;を使うため */
  width: 100%;/* 文字の横位置の為 */
  text-align: left;/* 文字左ぞろえ */
  bottom: -90px;/* 文字の縦位置 */
  left:0px;/* これが無いと変な位置になる */
  color: #332a27;/* 文字色 */
  font-size:0.8em;/* 文字サイズ */
　font-family: sans-serif;/* フォント指定 */
}


/* こだわりのところ */

/* 画像を横並びにする */
.kodawari-container {
  display: flex; /* flexコンテナにする */
  flex-wrap: wrap; /* 縦に折り返す */
  justify-content: center; /* 中央揃え */
  gap: 0px; /* 画像間の隙間 */
}

/* こだわり素材 */
.kodawari_sozai {
  position: relative;/* position: absolute;とセット */
  width: 50%;/* 画像の幅 */
  margin: 0px 0px;/* 上下の空きと左右の空き */
  max-width:90%;/* 最大幅 */
  background-color:rgba(0, 0, 0, 0);/* 背景色 */
  border: 0px solid rgba(0, 0, 0, 0);/* フチの設定 */
  border-bottom-width: 170px;/*下のフチ幅*/
}
.kodawari_sozai-moji {
  position: absolute;/* width: 100%;を使うため */
  width: 90%;/* 文字の横位置の為 */
  text-align: center;/* 文字中央ぞろえ */
  bottom: -140px;/* 文字の縦位置 */
　line-height:2;/* 行の高さ */
  left:5%;/* これが無いと変な位置になる */
  color: #332a27;/* 文字色 */
  text-shadow: 
       2px  2px 7px #fff,
      -2px  2px 7px #fff,
       2px -2px 7px #fff,
      -2px -2px 7px #fff,
       2px  0px 7px #fff,
       0px  2px 7px #fff,
      -2px  0px 7px #fff,
       0px -2px 7px #fff;/* 文字の影 */
  font-size:1em;/* 文字サイズ */
　font-family: sans-serif;/* フォント指定 */
}

/* こだわり製造 */
.kodawari_seizou {
  position: relative;/* position: absolute;とセット */
  width: 50%;/* 画像の幅 */
  margin: 0px 0px;/* 上下の空きと左右の空き */
  max-width:90%;/* 最大幅 */
  background-color:rgba(0, 0, 0, 0);/* 背景色 */
  border: 0px solid rgba(0, 0, 0, 0);/* フチの設定 */
  border-bottom-width: 230px;/*下のフチ幅*/
}
.kodawari_seizou-moji {
  position: absolute;/* width: 100%;を使うため */
  width: 90%;/* 文字の横位置の為 */
  text-align: left;/* 文字左ぞろえ */
  bottom: -200px;/* 文字の縦位置 */
　line-height:0.75;/* 行の高さ */
  left:5%;/* これが無いと変な位置になる */
  color: #332a27;/* 文字色 */
  text-shadow: 
       2px  2px 7px #fff,
      -2px  2px 7px #fff,
       2px -2px 7px #fff,
      -2px -2px 7px #fff,
       2px  0px 7px #fff,
       0px  2px 7px #fff,
      -2px  0px 7px #fff,
       0px -2px 7px #fff;/* 文字の影 */
  font-size:1em;/* 文字サイズ */
　font-family: sans-serif;/* フォント指定 */
}


/* 国産大麦使用おおむぎ工房のお菓子作り */
.oomugi-container {
  position: relative;/* position: absolute;とセット */
  width: 100%;/* 画像の幅 */
  margin: 0px 0px;/* 上下の空きと左右の空き */
  max-width:750;/* 最大幅 */
  background-color:rgba(0, 0, 0, 0);/* 背景色 */
  border: 0px solid rgba(0, 0, 0, 0);/* フチの設定 */
}

.oomugi-moji {
  position: absolute; /* 親要素の左上を基準に配置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 要素の中心を合わせる */
  color: #ffffff; /* 文字の色(白) */
  text-shadow: 
       2px  2px 7px #7f4600,
      -2px  2px 7px #7f4600,
       2px -2px 7px #7f4600,
      -2px -2px 7px #7f4600,
       2px  0px 7px #7f4600,
       0px  2px 7px #7f4600,
      -2px  0px 7px #7f4600,
       0px -2px 7px #7f4600;        /* 文字の影 */
  text-align: center; /* 文字を中央揃えにする */
  font-family: "游明朝", YuMincho,sans-serif;/* フォント指定 */
}



/* クリック・タップで展開するアコーディオンメニュー */
.accordion  {
  margin: 30px auto;
}

.accordion_title {
  position: relative;
  border: none;
  display: block;
  list-style: none;
  width: 100%;
  cursor: pointer;
  background: #ffffff;
  border: 0px solid rgba(255, 255, 255, 0);
  padding: 1.4em 1.6em 1.4em;
  line-height: 1.6em;
}

summary.accordion_title::-webkit-details-marker {
  display:none;
}

.accordion_title:after {
  content: "＋";
  position: absolute;
  top: calc(50% - 0.5em);
  right: 20px;
  line-height: 200%;
  padding: 0;
  pointer-events: none;
}

.accordion::details-content {
  opacity: 0;
  block-size: 0;
  transition: .3s;
  transition-property: display, opacity, block-size, padding;
  transition-behavior: allow-discrete;
  line-height: 1.6em;
}

.accordion .accordion_content {
  padding: 0 2em 0 3em;
}

.accordion .accordion_content > *:first-of-type {
  margin-top: 0;
}

.accordion .accordion_content > *:last-of-type {
  margin-bottom: 0;
}

.accordion[open]::details-content {
  opacity: 1;
  block-size: auto;
  block-size: calc-size(auto, size);
}

.accordion[open] .accordion_content {
  padding: 1.4em 2em 1.4em 3em;
}

.accordion[open] .accordion_title:after {
  content: "―";
}



/* 無限右流れ */
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}

/* 無限左流れ */
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 25s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: calc(130vw / 6);
  text-align: center;/* 文字中央ぞろえ */
}
.scroll-infinity__item>img {
  width: 250%;
}


@keyframes infinity-scroll-right {
from {
  transform: translateX(-100%);
}
  to {
  transform: translateX(0%);
}
}
.scroll-infinity__list--right{
  animation :infinity-scroll-right 65s infinite linear 0.5s both;
}
.scroll-infinity__item--text {
  width: calc(500vw / 26);
  font-size: 1.5vw;
  line-height: 1;
  color: #222;
  text-align: center;/* 文字中央ぞろえ */
}


/* メニューボタン */
@mixin userSelectNone {
  //選択制御
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

/* ポップアップメニュー表示制御 */
   -webkit-touch-callout: none;
}

.menu_btn {
  display: block;
  width: 90%;
  max-width: 700px;
  padding: 16px 8px;
  border: 0px solid #fff;
  border-radius: 3px;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(to right, #ff618e 0%, #cc2988 45%, #fffacd 100%);
  background-size: 200% auto;
  text-align: center;
  box-shadow: 1px 3px 4px rgba(000, 000, 000, 0.3);
  cursor: pointer;
  @include userSelectNone;
  transition: .5s;
  text-decoration: none;
}

.menu_btn:hover {
  color: #fff;
  background-position: right center;
  text-decoration: none;
}

a {
  text-decoration: none;
}