@charset "UTF-8";

/* sass */

/* メイン画像 */
@media all and (min-width: 768px) { .area-pagettl { min-height: 350px; }
  .area-pagettl::before { max-height: calc(350px + 84px); } }

.area-pagettl::before{
      background-image: url(/factbook/rice/images/bg-pagettl-rice-sp.jpg);
      content: '';
    }
    @media (min-width: 768px) {
      .area-pagettl::before{
        background-image: url(/factbook/rice/images/bg-pagettl-rice-pc.jpg);
      }
    }


/* クラス */
.center {text-align: center}

.margin-l5_r5 {margin-left: 5px;
               margin-right: 5px;}

.m-left10 {margin-left: 10px;}
.m-left20 {margin-left: 20px;}
.m-left30 {margin-left: 30px;}
.pt30 {padding-top: 30px;}
.mt50 {margin-top: 50px;}
.mt30 {margin-top: 30px;}
.mt20 {margin-top: 20px;}
.mt10 {margin-top: 10px;}
.mb30 {margin-bottom: 30px;}
.mb20 {margin-bottom: 20px;}
.mb10 {margin-bottom: 10px;}
.font-red {color: red;}
.no-margin {margin-bottom: 5px;}
.no-top {margin-top: 0px;}

.clear {clear: both;}

.text_small{font-size: small;}


/* ページネーション（ページ送り） */
.Pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 100px;
}
.Pagination > * + * {
  margin-left: 12px;
}
.Pagination-Item-Link {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 40px;
  height: 40px;
  background: #fff;
  font-size: 25px;
  font-weight: bold;
  transition: all 0.15s linear;
}
.Pagination-Item-Link-Icon {
  width: 20px;
}
.Pagination-Item-Link.isActive {
  pointer-events: none;
  background: #111;
  color: #fff;
}
.Pagination-Item-Link:not(.isActive):hover {
  background: #111;
  color: #fff;
}


/* アコーディオン（茶色） */
/* アコーディオン開きっぱの場合は<details open class="accordion-001">にする */
.accordion-001 {
	max-width: 850px;
	background-color: #F3F1F1;
	margin-bottom: 10px;
}

.accordion-001:not([open]) {
    margin-bottom: 7px;
}

.accordion-001 summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	border-radius: 5px;
	background-color: #4e473c;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

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

.accordion-001 summary::before,
.accordion-001 summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #fff;
    content: '';
}

.accordion-001 summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion-001 summary::after {
    transition: rotate .3s;
}

.accordion-001[open] summary::after {
    rotate: 90deg;
}

/* アコーディオン（オレンジ） */
/* アコーディオン開きっぱの場合は<details open class="accordion-001">にする */
.accordion-orange {
	max-width: 850px;
	background-color: #F3F1F1;
	margin-bottom: 10px;
}

.accordion-orange:not([open]) {
    margin-bottom: 7px;
}

.accordion-orange summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	border-radius: 5px;
	background-color: #f6a700;
	color: #231815;
	font-weight: 600;
	cursor: pointer;
}

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

.accordion-orange summary::before,
.accordion-orange summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #231815;
    content: '';
}

.accordion-orange summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion-orange summary::after {
    transition: rotate .3s;
}

.accordion-orange[open] summary::after {
    rotate: 90deg;
}

/* アコーディオン（水色） */
/* アコーディオン開きっぱの場合は<details open class="accordion-001">にする */
.accordion-blue {
	max-width: 850px;
	background-color: #F3F1F1;
	margin-bottom: 10px;
}

.accordion-blue:not([open]) {
    margin-bottom: 7px;
}

.accordion-blue summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	border-radius: 5px;
	background-color: #54c0ef;
	color: #231815;
	font-weight: 600;
	cursor: pointer;
}

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

.accordion-blue summary::before,
.accordion-blue summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #231815;
    content: '';
}

.accordion-blue summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion-blue summary::after {
    transition: rotate .3s;
}

.accordion-blue[open] summary::after {
    rotate: 90deg;
}

/* アコーディオン（ピンク） */
/* アコーディオン開きっぱの場合は<details open class="accordion-001">にする */
.accordion-pink {
	max-width: 850px;
	background-color: #F3F1F1;
	margin-bottom: 10px;
}

.accordion-pink:not([open]) {
    margin-bottom: 7px;
}

.accordion-pink summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	border-radius: 5px;
	background-color: #f19ec2;
	color: #231815;
	font-weight: 600;
	cursor: pointer;
}

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

.accordion-pink summary::before,
.accordion-pink summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #231815;
    content: '';
}

.accordion-pink summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion-pink summary::after {
    transition: rotate .3s;
}

.accordion-pink[open] summary::after {
    rotate: 90deg;
}

/* アコーディオン（黄色） */
/* アコーディオン開きっぱの場合は<details open class="accordion-001">にする */
.accordion-yellow {
	max-width: 850px;
	background-color: #F3F1F1;
	margin-bottom: 10px;
}

.accordion-yellow:not([open]) {
    margin-bottom: 7px;
}

.accordion-yellow summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	border-radius: 5px;
	background-color: #ffdc25;
	color: #231815;
	font-weight: 600;
	cursor: pointer;
}

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

.accordion-yellow summary::before,
.accordion-yellow summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #231815;
    content: '';
}

.accordion-yellow summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion-yellow summary::after {
    transition: rotate .3s;
}

.accordion-yellow[open] summary::after {
    rotate: 90deg;
}

/* アコーディオン（きみどり） */
/* アコーディオン開きっぱの場合は<details open class="accordion-001">にする */
.accordion-green {
	max-width: 850px;
	background-color: #F3F1F1;
	margin-bottom: 10px;
}

.accordion-green:not([open]) {
    margin-bottom: 7px;
}

.accordion-green summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 1em 2em;
	border-radius: 5px;
	background-color: #c3d600;
	color: #231815;
	font-weight: 600;
	cursor: pointer;
}

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

.accordion-green summary::before,
.accordion-green summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #231815;
    content: '';
}

.accordion-green summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion-green summary::after {
    transition: rotate .3s;
}

.accordion-green[open] summary::after {
    rotate: 90deg;
}


/* 緑丸 */
.circle {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: #006400;
	text-align: center;
	line-height: 14px; /* 垂直方向の中央揃え */
	color: #ffffff;
	display: inline-block; /*  span要素など横並びにする場合 */
	margin-right: 3px;
}

.list {
	list-style-type: nome;
	padding-left: 3px;
	margin-left: 20px;
}

.square-list ul li{
	padding-left: 20px;
}

.square-list li{
	list-style-type: nome;
	position:relative;
}

.square-list li:before{
	list-style-type: nome;
	content: ''; /* 空要素 */
    position: absolute;
    left: -1.2em;
    top: 0.9em;
    transform: translateY(-50%); /* 垂直方向の中央配置 */
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: #006400;
}


/* ボタン 
.button a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 850px;
	height: 70px;
	color: #333;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
}

.button a:hover {
	color: #BFBFBF;
}


.button10 a {
	background-color: #ffa500;
	border: 1px solid transparent;
}

.button10 a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #ffa500;
}

.button10 a:hover {
	background-color: #ffa500;
	border: 1px solid #ffa500;
}

.button10 a:hover::after {
	border-color: transparent transparent transparent #BFBFBF;
}
*/


.button001 a {
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 850px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button001 a:hover {
    background: #313131;
    color: #FFF;
}
.button001 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button001 a:hover:after {
    border-color: #FFF;
}

ul {
  /* フレックスボックスが設定されていたら解除 */
  display: block; 
  /* 必要であればパディングを調整 */

}

li {
  /* 横並び設定の解除（inline-blockやflexからの戻し） */

  display: list-item; 
  /* フロートの解除 */
  float: none; 
  /* 横幅を親要素に合わせる */
  width: auto; 
}
.li_pl {
   margin-left: 30px; 
}
.float_none {
  clear: both;
}

figure {
  float: right;
  margin: 0 0 15px 15px;
  width: 20%;
}
figure img {
  max-width: 100%;
}
.h_subtitle {
	font-size: 0.8em;
}
.h_title {
	font-size: 1.3em;
}


/* クイズQA */
.boxQ {
	margin-top: 2em;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 1em;
	font-weight: bold;
	color: #FFF;/*文字色*/
	background: #985c00;/*背景*/
	border: solid 3px #985c00;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.boxQ p {
	margin: 0;
	padding: 0;
	text-align: center;
}

.boxA {
	margin-top: 2em;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 1em;
	font-weight: bold;
	color: #985c00;/*文字色*/
	background: #FFF;/*背景*/
	border: solid 2px #985c00;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.boxA p {
	margin: 0;
	padding: 0;
	text-align: center;
}


/* 工程の見出し */
.box-orange {
	margin-top: 50px;
	margin-right: 0;
	margin-left: 0;
	color: #231815;/*文字色*/
	background: #f3994f;/*背景*/
	border: solid 2px #f3994f;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.box-orange p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 2em;
}

.box-blue {
	margin-top: 50px;
	margin-right: 0;
	margin-left: 0;
	color: #231815;/*文字色*/
	background: #5eb7e8;/*背景*/
	border: solid 2px #5eb7e8;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.box-blue p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 2em;
}

.box-pink {
	margin-top: 50px;
	margin-right: 0;
	margin-left: 0;
	color: #231815;/*文字色*/
	background: #f19ec2;/*背景*/
	border: solid 2px #f19ec2;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.box-pink p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 2em;
}

.box-yellow {
	margin-top: 50px;
	margin-right: 0;
	margin-left: 0;
	color: #231815;/*文字色*/
	background: #ffdc25;/*背景*/
	border: solid 2px #ffdc25;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.box-yellow p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 2em;
}

.box-green {
	margin-top: 50px;
	margin-right: 0;
	margin-left: 0;
	color: #231815;/*文字色*/
	background: #b7d332;/*背景*/
	border: solid 2px #b7d332;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.box-green p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 2em;
}

.box-lightblue {
	margin-top: 50px;
	margin-right: 0;
	margin-left: 0;
	color: #231815;/*文字色*/
	background: #8bcec9;/*背景*/
	border: solid 2px #8bcec9;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.box-lightblue p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 2em;
}