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

/*全体の設定
---------------------------------------------------------------------------*/
/*===============================

    Reset

================================*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
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;
    -webkit-overflow-scrolling: touch !important;

}

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

ol,
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;
    text-decoration: none;
}

a:link,
a:visited,
a:active {
  color:#88BB23;
}

a:hover{
    opacity:0.8;
  transition:0.3s;
}

del {
    text-decoration: line-through;
}

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

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

input,
select {
    vertical-align: middle;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.hidden {
    display: none;
}

/*===============================

    Base
    サイト全体のフォント
    字間や行間
    リンクの扱い
    imgのサイズ
    幅の設定等

================================*/

html {
    font-size: 16px;
}


body {
    /*ゴシック*/
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Meiryo, sans-serif;
    color: #333;
    line-height: 32px;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/*共通の設定
---------------------------------------------------------------------------*/
.pc {
    display: block !important;
}

.sp {
    display: none !important;
}



@media only screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}

/*-------------------------------------------
765以下の場合
-------------------------------------------*/
@media screen and (max-width: 765px) {
 body {

 }
}

/*-------------------------------------------
マウスオーバー時の透過
-------------------------------------------*/
.mouseover:hover {
	filter:alpha(opacity=50); /* IE 6,7*/
	-ms-filter: "alpha(opacity=50)" !important; /* IE 8,9 */
	-moz-opacity:0.5 !important; /* FF , Netscape */
	-khtml-opacity: 0.5 !important; /* Safari 1.x */
	opacity:0.5 !important;
	transition: 0.7s !important;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  background-color: #000;
  display: flex;
  height: 84px;
}
#header p {
  font-size: 26px;
  color: #fff;
  font-weight: bold;
  letter-spacing : 6px;
  padding:20px 0;
  margin:auto;
}

/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
.mainvisual_pc {
  width: 100%;

}
.mainvisual_sp {

}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */

/*-------------------------------------------
タイトル
-------------------------------------------*/
.contents_title {
  text-align: center;
  line-height: 3.5em;
}
.base_title {
  font-size: 40px;
  font-weight: bold;
}
.base_subtitle {
  font-size: 16px;
  font-weight: bold;
  letter-spacing : 4px;
}
/*-------------------------------------------
768以下の場合
-------------------------------------------*/
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
.base_title {
  font-size: 30px;
}
}


/*-------------------------------------------
モミガライトとは？
-------------------------------------------*/
.sec_1 {
  padding: 80px 0;

}
.sec_inner {
  max-width: 980px;
  margin: 0 auto;
}
.about {
  margin-right:auto;
  margin-left:auto;
}
.aboutimg_pc {
  width: 304px;
  height: 372px;
  margin: 30px 0;
}
.aboutimg_sp {

}
.about ul {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 auto;
}
.about p {
  text-align: center;

}
/*-------------------------------------------
768以下の場合
-------------------------------------------*/
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
.sec_inner {
  max-width: 90%;
  margin: 0 auto;
}
.about ul {
  margin: 20px 0;
}
.about ul li {
  margin-bottom: 30px;

}
}

/*-------------------------------------------
サイクル
-------------------------------------------*/
.about_cycle {
  background-color: #F5EFE9;
  padding: 100px 0;
  margin-bottom: 80px;
}
.flex {
  display: flex;
  width: 980px;
  margin-right:auto;
  margin-left:auto;
}
.about_cycle .left img {
  width: 552px;
  height: 545px;
}
.square{
  text-align: center;
  width: 240px;
  padding: 10px;
  background: #88BB23;
  margin: 20px 0 14px 0;
}
.square p {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}

.flex .right {
  margin: 0 0 0 40px;
  padding: 0;
}
.flex .title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 24px;
  padding-bottom: 46px;
  line-height: 1.8em
}
.about_container {
  background-color: #fff;
  padding-top: 50px;
  padding-bottom: 50px;
  border-radius: 18px;
  margin-top: 70px;
  width: 980px;
  margin-right:auto;
  margin-left:auto;
  text-align: center;
  display: block;
}
.about_container h2 {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 50px;
}
.about_container p {
  width: 90%;
  text-align: left;
  display: inline-block;
  padding-top: 50px;
}
/*-------------------------------------------
768以下の場合
-------------------------------------------*/
@media only screen and (max-width: 768px) {
.about_cycle {
padding: 60px 0;
}
.flex {
  flex-direction: column;
  align-items: center;
  max-width: 90%;
}
.flex img{
  width: 100%;
}
.flex .right {
  margin: 0;
}
.flex .right p{
  padding-top: 0px;
}
.flex .title {
  padding: 0;
}
.about_container {
  max-width: 90%
}
.about_container img{
  max-width: 85%
}
.about p {
  text-align: left;
}
.about p br {
  display: none;
}
}



/*-------------------------------------------
特徴
-------------------------------------------*/
.features {
  width: 980px;
  text-align: center;
  padding: 60px 0 100px 0;
}
.features .flex {
  margin-top: 70px;
}
.features .flex .right {
  text-align: left;
}
.features .flex .title {
  font-size:26px;
  color:#800F0F;
  margin-top: 10px;
}
.compare1 {
  margin-bottom: 100px;
}
.compare1 img {
  width: 48px;
  height: 30px;
  padding-right: 5px;
}
.table_title {
  font-size: 26px;
  font-weight: bold;
  margin: 60px 0 30px 0;

/*
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 200px; 
  background-image: url(../image/common/icon1.png); 
  background-position:center; 
  background-size: 48px 29px; 
  background-repeat: no-repeat; 
  */
} 

/*-------------------------------------------
768以下の場合
-------------------------------------------*/
@media only screen and (max-width: 768px) {
.features {
  width: 100%;
  padding: 20px 0 60px 0;
}
.features p {
  text-align: left;
}
.features p br {
  display: none;
}
.features .flex {
  max-width: 100%
}
.features .flex .right p{
  padding-top: 20px;
}
}

/*-------------------------------------------
テーブル
-------------------------------------------*/

table {
  width: 100%;
}
table th {
  padding: 10px 10px 10px;
  background-color: #eee;
  border: 1px solid #fff;
  font-weight: bold;
}
table tr {
  border-bottom: 1px solid #fff;
  margin-bottom: 5px;
}
table td {
  border: 1px solid #fff;
}
thead .table_blank {
  background-color: #fff;
}

/*薪との比較*/
tbody tr .table_maki {
  background-color: #654040;
  color: #fff;
}
tbody tr .table_momi {
  background-color: #BA6868;
  color: #fff;
}
tbody tr .maki_item {
  background-color: #F4F0EC;
}
tbody tr .momi_item {
  background-color: #F5DEDE;
}

/*保存期間の比較*/
tbody tr .table_toyu {
  background-color: #C9946C;
  color: #fff;
}
tbody tr .table_gass {
  background-color: #58ADA7;
  color: #fff;
}
tbody tr .toyu_item {
  background-color: #F4F3DE;
}
tbody tr .gass_item {
  background-color: #DBEFED;
}
/*.table_design01 {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}
.table_design01 th {
  padding: 10px;
  background-color: #E0E0E0;
  font-weight: bold;
  color: #333;
  border: solid 1px #fff;
}
.table_design01 td {
  padding: 10px;
  background-color: #F4F0EC;
  font-weight: bold;
  line-height: 2em;   表内テキスト行間
  border: solid 1px #fff;
}
.table_design01 .table_blank {
  background-color: #fff;
}
.table_design01 .table_design02 {
  background-color: #BA6868;
  color: #fff;
}
.table_design01 .table_item {
  background-color: #654040;
  color: #fff;
}
.table_design01 .table_momi {
  background-color: #F5DEDE;
}
.table_design01 .table_design03 {
  background-color: #C9946C;
  color: #fff;
}
.table_design01 .table_design04 {
  background-color: #58ADA7;
  color: #fff;
}
.table_design01 .table_toyu {
  background-color: #F4F3DE;
}
.table_design01 .table_gas {
  background-color: #DBEFED;
}
-*/

/*-------------------------------------------
768以下の場合
-------------------------------------------*/
@media only screen and (max-width: 768px) {
table {
  display: block;
}
table thead {
  display: none;
}
table tbody, table tr, table th, table td {
  display: block;
  width: 100%;
}
table tr {
  margin-bottom: 20px;
  border: none;
}
table th {
  padding: 10px 10px 10px;
  font-weight: bold;
  font-size: 16px;
  border: none;
  background-color: #fff;
}
table td {
  position: relative;
  font-weight: bold;
  padding: 10px 10px 10px calc(50% + 16px);
  text-align: left;
  background-color: #fff;
}
table td:before {
  content: attr(aria-label);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 50%;
  height: 100%;
  padding: 10px;
  border-right: 1px solid #fff;
  background-color: #eee;
}

}

/*-------------------------------------------
ECへの誘導
-------------------------------------------*/
.ecimg_pc {
  margin: 0px 0 100px;
}

.ecimg_sp {
  margin: 0px 0 80px;
}
/*-------------------------------------------
引き取り限定注文
-------------------------------------------*/
.order {
  background-color: #F5EFE9;
  padding: 100px 0;
}
.order h2 {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 50px;
  text-align: center;
}
.order a {
  text-decoration: underline;
}
.order_list {
  width:100%;
  display: flex;
  flex-wrap: wrap;
  margin: 80px 0;
  justify-content: center;

}
.order_image {
  margin-bottom:10px;
}
.order_item {
  width: calc(25% - 6px * 3 / 4);
  margin-right: 6px;
  margin-top: 6px;
  padding: 6px;
}
.order_item:nth-child(4n) {
  margin-right: 0;
}
.order_item p {
  line-height:1.5em;
}
.order_contact_box {
  border: #333333 1px solid; /*境界線の指定*/
  padding:20px 50px;
  max-width: 640px;
  margin:0px auto;
}
.order_contact_box p {
  text-align: center;
}
.order_contact_tel a {
  font-size: clamp(16px, 8vw, 40px);
  color:#333;
  font-weight: bold;
  text-decoration: none;
}
.order_contact_text1 {
  line-height:1.5em;
  border-bottom:1px solid #333;
  font-size:15px;
  padding-bottom:10px;
  margin-bottom:10px;
}
.order_contact_text2 {
  line-height:1.5em;
}

/*-------------------------------------------
1000以下の場合
-------------------------------------------*/
@media only screen and (max-width: 1000px) {
.order {
  padding: 60px 0;
}
.order_item {
  width: calc(50% - 6px / 2);
  margin-right: 6px;
}
.order_item:nth-child(2n) {
  margin-right: 0;
}
.order_list {
  margin: 40px 0;
}
.order_contact_container {
  width: 100%;  
}
.order_contact_box {
  width: 90% ;
  font-size:13px;
}
}

/*-------------------------------------------
768以下の場合
-------------------------------------------*/
@media only screen and (max-width: 768px) {
.order_item p {
  font-size: 14px;  
}
}
/*-------------------------------------------
フォーム
-------------------------------------------*/
.order_form {
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
}
.order_form_title {
  margin:60px;
}
.order_form_title h2 {
  padding-top: 20px;
  padding-bottom: 0;
}
.order_form_item {
  padding-top: 12px;
  padding-bottom: 10px;
  width: 100%;
  align-items: center;
  font-size: 15px;
}
.order_form_item p {
   font-weight: bold;
}
.order_form_item input { 
  width: 100%;
  font-size: 15px;
  padding-left: 11px;
  border: none;
  padding-top: 13px;
  padding-bottom: 10px;
}
.order_form_item {
  font-weight: bold;
}
.mandatory {
  font-weight: bold;
  color: #800F0F;
}
.order_title {
  margin-top: 20px;
  font-weight: bold;
}
.order_content {
  padding-top:20px;
  display: flex;
}
.order_content dd {
  margin: 0 0 0 auto;
}

.order_content dd select {

}
.order_content p {
  font-weight: bold;
}
.order_content label {
  font-size:16px;
}
.order_content .mandatory {
  font-weight: bold;
  color: #800F0F;  
  font-size: 15px;
  height: 35px
}
.hidden_area {
  display:flex;
}
.hidden_area select {
  width:85px;
  padding:0.5px;
  border: none;
}
.order_content li {
  display:flex;
  justify-content:space-between;
  padding-top:10px;
  padding-bottom:10px;
  font-size: 15px;
}
form#mail_form .order_content dd {
  display: flex;
}

form#mail_form .order_content dd select {
  width:85px;
  padding:0.5px;
  border: none;
}

form#mail_form .order_content dd:after {
  content: '個';
  margin-left: 8px;
  padding-right: 10px;
}


/*-------------------------------------------
768以下の場合
-------------------------------------------*/
@media only screen and (max-width: 520px) {
.hidden_area select {
  margin-left:20px;
}
.order_content {
  display:block;
}
}
/*-------------------------------------------
個人情報の取り扱い
-------------------------------------------*/
.scroll {
  margin-top:30px;
  padding:16px;
  background-color:#fff;
  font-size:15px;
  line-height:2em;
  letter-spacing: .1rem;
  width: 100%;                /* 横幅を200pxに指定 */
  height: 236px;               /* 横幅を200pxに指定 */
  border: 1px solid #A2A2A2;      /* わかりやすくボーダーを引く */
  overflow-y: scroll;          /* 縦方向にスクロール可能にする */
}
.scroll p {
  margin-bottom:24px;
}
.privacy_title {
  font-weight: bold;
  font-size: 16px;
}
.privacy_checkbox {
  margin: 0 auto;
    width: fit-content;
    margin: 20px auto 60px auto;
    text-align: center;
    display: flex;
    text-align: center;
}

/*-------------------------------------------
お問合せ
-------------------------------------------*/
.contact {
  background-color: #88BB23;
  padding: 100px 0 100px 0;
}
.contact_container {
  background-color: #fff;
  padding: 50px 0;
  border-radius: 18px;
  margin-top: 0px;
  width: 980px;
  margin-right:auto;
  margin-left:auto;
  display: block;
}
.contact .base_subtitle {
  text-align: center;
  padding: 0;
}
.contact_box {
  border: #88BB23 2px solid; /*境界線の指定*/
  padding:20px;
  max-width: 440px;
  margin:20px auto;
}
.contact_box p {
  text-align: center;
  padding: 10px 0;
}
.contact_title {
  font-weight: bold;
  font-size: 20px;
}
.contact_tel{
  font-size: clamp(16px, 8vw, 40px);
  color:#88BB23;
  font-weight: bold;
}
.contact_text {
  line-height:1.5em;
}
/*-------------------------------------------
768以下の場合
-------------------------------------------*/
@media only screen and (max-width: 768px) {
.contact {
  padding: 60px 0;
}
.contact_container {
  width: 90%;
}
.contact_box {
  width: 85%
}
}


/*-------------------------------------------
ボタン
-------------------------------------------*/
a.btn {
  font-size: 22px;
  font-size: clamp(16px, 4vw, 22px);
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
  width: min(50vw, 280px);
	margin: 20px auto;
	padding: 1rem 1.5rem;
	font-weight: bold;
	background-color: #000;
	color: #fff;
	transition: 0.5s;
}
a.btn:hover {
	color: #fff;
	background: #707070;
}
/*-------------------------------------------
フッター
-------------------------------------------*/
.footer {
  background-color: #000;
  color: #fff;
  padding: 40px 0;
}
.footer_menu {
  display: flex;
  justify-content: space-between;
  width: 980px;
  margin: 0 auto;

}
a.footer_btn {
  font-size: 18px;
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: 20px 0;
	padding: 1rem 4rem;
	font-weight: bold;
  border: 2px solid #fff;
	background-color: #000;
	color: #fff;
	transition: 0.5s;
}
a.footer_btn:hover {
	color: #000;
	background: #fff;
}
.copyright p {
  background: #000000;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 20px 0;
}
/*-------------------------------------------
768以下の場合
-------------------------------------------*/
@media only screen and (max-width: 768px) {
.footer {
  padding: 20px 0;
}
.footer_menu {
  flex-direction: column;
  align-items: center;
  max-width: 90%;
}
.footer_menu p{
  padding: 20px 0;
}
a.footer_btn {
	margin: 20px 0;
	padding: 1rem 4rem;
	font-weight: bold;
  border: 2px solid #fff;
	background-color: #000;
	color: #fff;
	transition: 0.5s;
}
}

/*-------------------------------------------
フォーム送信完了ページ
-------------------------------------------*/
.complete {
  margin-top:80px;
}
.complete p {
  line-height:2rem;
}
a.complete_btn {
  font-size: 24px;
  font-size: clamp(16px, 4vw, 18px);
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: min(50vw, 240px);
  margin: 100px auto;
  padding: 0.5rem 1rem;
  font-weight: bold;
  background-color: #000;
  color: #fff;
  transition: 0.5s;
}
a.btn:hover {
  color: #fff;
  background: #707070;
}