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

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Oswald:wght@200..700&&family=Noto+Serif+JP:wght@200..900&display=swap');

/*太さ可変可能CSS*/
.noto-serif-jp300 {/* ← class名 */
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight:300;/* ← ここに使いたい太さ（400や700など）を数字で指定 */
  font-style: normal;
}
.noto-serif-jp200 {/* ← class名 */
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight:200;/* ← ここに使いたい太さ（400や700など）を数字で指定 */
  font-style: normal;
}

.oswald-300 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight:300;
  font-style: normal;
}
.noto-sans-jp300 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.noto-sans-jp400 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 3;
  font-style: normal;
}
.kaigyou{
display: inline-block;
}
.fontsize16px{
font-size: 1.12rem;
}

.item_info_All ul,
.item_info_All li,
.item_info_All dl,
.item_info_All dt,
.item_info_All dd{
list-style: none;
/*line-height: 1.4rem;*/
}


.item_info_All h4,
.font30px{
font-size: 2rem;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  text-align: center;
  font-weight:600;/* ← ここに使いたい太さ（400や700など）を数字で指定 */
  margin: 0 auto 1rem;
  padding: 0;
  line-height: 170%;
}

.font26px{
font-size: 1.66rem;}

.color_BlueGreen{
color: rgba(0, 157 ,149 ,1);
}

.flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-around;
align-items: stretch;
margin: auto;
}

/*ファーストビュー*/
.first-img{
display: flex;
}

#nayami,
#story,
#daiji,
#plants,
#plants_lotion,
#fushiyou,
#hitsuyounamono,
#mark_meaning,
#osj_koe,
#faq-list{
margin:3rem auto 5rem;
max-width: 880px;
/*width: 96%;*/
}

/*こんなお悩み〜*/
#nayami{
text-align: center;
}
#nayami p{margin: 0 0 10px;
}
#nayami .flex.nayamiBox1 li,
#nayami .flex.nayamiBox2 li{
width: 28%;
max-width: 200px;
margin: 1rem 2%;
text-align: center;
font-size: 18px;
font-weight: bolder;
line-height: 140%;
padding: 0;
}
#nayami .flex.nayamiBox1 li{
border:solid 3px #d5dcdd;
border-radius: 25px;
}
#nayami .nayamiBox1 img{
max-width: 140px;
margin-bottom: 1rem;
}
#nayami .flex.nayamiBox2 img{
max-width: 160px;
margin-bottom: 1rem;
}

/*開発ストーリー*/
#story{
background: rgba(165, 206, 133, 0.2);
padding: 10px;
text-align: left;
}
#story div.Box_line{
border:solid 1px #009d95;
border-width: 0px 3px 0px 3px;
padding:1rem 1rem;
}
#story .flex{
justify-content: space-between;
align-items: center;
max-width: 800px;
margin:1.5em auto;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
#story .flex p{
margin-bottom: 0.5rem;
}
#story .story_txtL{
font-size: 1.33rem;
display: inline-block;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
line-height: 160%;
}
#story figure{
width: 18%;
margin:1rem;
}
#story .story_item_text{
width: 75%;
}

/*大事にしていること*/
#daiji{
max-width: 880px!important;
}
#daiji .flex div.daiji_item{
max-width: 270px;
border:solid 2px #009d95;
border-radius: 22px;
margin: 0.5rem auto;
padding: 0.8rem;
width:calc(850px / 3 - 2rem);
}
#daiji .flex div.daiji_item dd,
#daiji .flex div.daiji_item dt
{
display: inline-flex;
}
#daiji .flex div.daiji_item dt{
font-size: 1.4em;
line-height: 140%;
align-items:flex-start
}
#daiji .flex div.daiji_item dd{
align-items: center;
line-height: 150%;
}
#daiji .flex div.daiji_item dt img{
max-width: 2em;
margin-right: 0.5rem;
}
#daiji .flex div.daiji_item dd img{
max-width: 70px;
margin:0 0.5rem;
}
#daiji .flex div.daiji_item.daiji_item01 dd{
margin-top: 1rem;
}

/*たどり着いた植物*/
#plants .plants_ttl{
font-size: 1.5rem;
font-weight: bolder;
}
#plants .plants_txtBox{
padding:2rem;
}
#plants .plants_aloe{
background: rgba(220,245,245,0.8);
display: flex;
justify-content: space-between;
overflow: visible;
max-width: 900px;
margin: auto;
}
#plants .plants_aloe dl{
line-height: 180% !important;
width: 50%;
}
#plants .plants_aloe dl dt{
margin-bottom: 1rem;
}
#plants .plants_aloe dl dd{
line-height: 180%!important;
}
#plants .plants_aloe .plants_aloe_img{
max-width: 460px;
margin-right: -1rem;
margin-bottom: -1rem;
margin-top: 1em;
position: relative;
z-index: 10; 
height: fit-content;
}
#plants .plants_aloebera,
#plants .plants_etc{
background: rgba(220,245,245,0.5);
max-width: 900px;
margin: auto;
margin-top:1rem;
}
#plants .plants_aloebera .plants_ttl{
padding: 2rem;
}
#plants .plant_miyakojimaaloe{
margin:-1rem -1rem 0! important;
max-width: 105%!important;
}
#plants .miyako_icon{
margin: -3rem auto 0;
}
#plants .miyako_icon img{
max-width: 120px;
width: 20%;
margin: 0.1rem;
}
#plants .plants_etc .plants_etc_gettou{
justify-content: space-between;
overflow: visible;
}
#plants .plants_etc .plants_etc_gettou img{
max-width: 480px;
margin-left: -1rem;
}
#plants .plants_etc .plants_etc_gettou dl{
width: 35%;
margin:2rem;
line-height: 180%;
}
.plants_etc_photo{
display: flex;
}
.plants_etc_photo figure{
text-align: center;
font-size: 95%;
width: 20%;
margin: 1rem auto;
}

#plants_lotion{
border:solid 3px #d6f5f5;
border-width: 0 10px;
margin: 0 auto 5rem;
}
#plants_lotion h4{
margin-top: -1rem;
}
#plants_lotion .flex{
justify-content: space-between;
align-items: center;
margin: 2rem;;
}
#plants_lotion .flex .plants_lotion_text{
font-weight: bolder;
font-size: 1.46rem;
width: 70%;
}
#plants_lotion .flex img{
width: 28%;
}
#fushiyou .fushiyou_icon{
margin: auto;
text-align: center;
}
#fushiyou .fushiyou_icon img{
max-width: 160px;
margin: 5px;
}
a.link_list{
text-align: center;
background: rgba(0, 157 ,149 ,1);
color: #ffffff;
padding: 0.5em 1em;
font-weight: bolder;
}
a.link_list:hover{
background: rgba(0, 157 ,149 ,0.5);
}
#mark_meaning .flex{
max-width: 750px;
margin: 1rem auto;
background: rgba(212,219,33,0.2);
padding: 0.5rem;
align-items: center;
}
#mark_meaning dl{
width: 75%;
margin: 1rem;
}
#mark_meaning .flex dt{
font-size: 1.26rem;
margin-bottom: 0.8rem;
font-weight: bolder;
}
#mark_meaning .flex img{
width: 15%;
margin: 1rem;
min-width: 110px;
}
#osj_koe{
/*max-width: 90%;*/
background: rgba(165,206,133,0.2);
padding-top: 1.5rem;
position: relative;
}
#osj_koe img.deco01{
width: 15%;
position: absolute;
top: 2rem;
right: 2rem;
}
.koe_list .koe_item{
margin: 2.5rem;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.koe_list .koe_item dt{
width: auto;
font-size: 1.46em;
line-height: 160%;
font-weight: bold;
margin-bottom: 0.8em;
position: relative;
padding-left: 1.3em; /* 丸が入るスペースを確保 */
}
.koe_list .koe_item dt::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 40%;
  transform: translateY(-25%); /* 上下中央揃え */
  width: 0.8em;                  /* 丸の幅 */
  height:0.8em;                 /* 丸の高さ */
  background-color: rgba(0, 157 ,149 ,1);/* 丸の色 */
  border-radius: 50%;          /* 正円にする */
}
.koe_list .koe_item dd{
margin-left: 10%;
background: #fff;
padding: 0.8rem;
border-radius: 9px;
line-height: 140%;
}
#osj_koe p{
padding: 2rem;
text-align: right;
font-size: 90%;
}
#faq-list{
width: 90%;
margin: 2rem auto;
}
.faq-item{
line-height:180%!important;
margin-top: 1.5rem;
}


/*==================
--Q&A--カウンター
===================*/
/* 1. dlタグでカウンターをリセット */
.faq-item dl {
  counter-reset: qa-counter;
}
/* 2. dtとddを囲んでいるdivでカウンターを1ずつ進める 【ここがポイント！】 */
.faq-item {
  counter-increment: qa-counter;
}
/* 3. dtの頭に「Q1」を表示する */
.faq-item dt {
  font-weight: bold;
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  font-size: 1.12rem;
  line-height: 160%;
}
.faq-item dt::before {
  content: "Q" counter(qa-counter); /* 進んだ数字を表示 */
  
  /* 書体の指定（お好みで調整してください） */
  font-family: "Oswald", sans-serif;
  font-size: 1.25em;
  color: rgba(0, 157 ,149 ,1);
  font-weight: 400;
  margin-right:0.8em;
  width: 1em;
}
/* 4. ddの余白調整 */
.faq-item dd {
  margin-left: 0;
  padding-left: 2.8em;
  margin-top: 8px;
  color: #333;
}
/*==================*/

/*==================
タイトル装飾-両端にライン
===================*/
.title-line {
  display: flex;
  align-items: center;
  text-align: center;
}
.title-line::before,
.title-line::after {
  content: "";
  flex-grow: 1;
  height: 1px; /* 線の太さ */
  background-color: rgba(0, 157 ,149 ,1); /* 線の色 */
}
.title-line::before {
  margin-right: 1em; /* 文字と左側の線の間隔 */
}
.title-line::after {
  margin-left: 1em; /* 文字と右側の線の間隔 */
}

/*==================
文字に黄色いライン
===================*/
.marker01 {
  background: linear-gradient(transparent 60%, #ffff00 60%);
  text-align: left;
}


/*商品について--商品詳細 ボタン*/
.top-tab-area {
    display: flex;
    justify-content: center;
    gap: 25%;
    border-bottom: 1px solid #777;
}
.top-tab-button{
    width: 10em;
    height: 2rem;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #777;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    letter-spacing: 0.5px;

    color: #555;
    text-decoration: none;
    font-size: 16px;
    background-color: #fff;

    margin-bottom: -1px;
}
.top-tab-button-not{/*選ばれてない箇所*/
border-bottom: 1px solid #777;
color: #555;
}
.top-tab-button:hover{
background: #aaaaaa;
color: #fff;
border-color: #aaaaaa;
}



@media screen and (max-width:768px){
  /*768px以下で適用する内容*/
/*=================
=================*/	

#nayami .flex.nayamiBox1 li,
#nayami .flex.nayamiBox2 li{
width: 44%;
}

plants .plants_etc .plants_etc_gettou dl,
#plants .plants_txtBox,
#plants_lotion .flex,
#plants .plants_aloebera .plants_ttl{
padding:1rem;
}
#plants .plants_aloe,
#plants_lotion .flex{
flex-direction: column;
}
#mark_meaning dl{
width: 100%;
}
.koe_list .koe_item dd{
margin-left: 0;
}
#osj_koe h4{
font-size: 1.5rem;
}
.koe_list .koe_item{
margin: 1rem;
justify-content: space-between;
flex-direction: column;
align-items: baseline;
}
.koe_list .koe_item dt{
font-size: 1.3em;
}
#osj_koe p{
margin: 1rem;
}
#story .flex{
flex-flow:column;
}
#story img{
max-width: 160px;
}
/*枠サイズ整え*/
#plants .plants_aloe dl,
#plants .plants_etc .plants_etc_gettou dl,
#story .story_item_text,
#story figure,
#plants_lotion .flex .plants_lotion_text,
#plants_lotion .flex,
#plants_lotion .flex img{
width: auto;
}

}