/* 共通のスタイル */
.menu-font,
.menu-font a {
    margin: 0;
    color: #3F3632;
    font-size: 1.6rem;
    font-weight: 1000;
    letter-spacing: 0.1em;  /* 文字間隔を広げる */
}

body {

    padding-top: 50px;
    background: #F4F3E5;
    font-family: 'Noto Sans JP', sans-serif;
    color: #3F3632;

}

/* リンクの通常状態（未訪問）のスタイル */
a {
    color: #326338; /* リンクの文字色を設定 */

}

/* リンクのホバー状態（マウスを重ねたとき）のスタイル */
 a:hover {
    color: #8EA88E; /* リンクのホバー時の文字色を設定 */
}



.menu-font {
    padding: 0; /* aタグのパディングもリセット */
    margin: 0;
}

/* スマートフォン画面のメディアクエリ */
@media screen and (max-width:640px) {
	.pc {
		display: none;
	}
    .mobile-br {
        display: block; /* スマートフォン画面ではブロック要素として表示し、改行を挿入 */
    }
}
@media screen and (min-width:641px) {
	.sp {
		display: none;
	}
    .mobile-br {
        display: none;
    }
}

/* menu */
.inner {
    width: 100%;
    text-align: center;
}

.inner:after {
    content: "";
    clear: both;
    display: block;
}

/* header */
#top-head {
    top: 0px;
    position: absolute;
    width: 100%;
    margin: 0px auto 0; /* 上マージンを調整 */
    padding: 150px 0 0;
    line-height: 1;
    z-index: 999;
}

#top-head a,
#top-head {
    color: #3F3632;
    text-decoration: none;
}

 .inner {
    position: relative;
}

#top-head {
    float: left;
    font-size: 36px;
}

.logo {
    top: 0px;
    margin: auto;
    text-align: center;
}
#global-nav ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    flex-wrap: wrap;
}

#global-nav li {
    flex: 1;
    min-width: 150px;
}

#global-nav li:last-child {
    margin-right: 0;
}

#global-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; 
    height: 50px;  /* この高さを基準として画像が縮小されます。必要に応じて調整してください */
}

#global-nav img {
    max-height: 80%;  /* 画像の高さがaタグの高さの80%を超えないように制限 */
    width: auto;  /* 幅は自動に設定 */
}

.logo-image{
    width: 300px; 
}
@media only screen and (max-width: 768px) {
    .logo-image{
        width: 200px; 
    }
}
.tt {

    font-weight: 500;
  }

@media only screen and (max-width: 768px) {
    #global-nav a {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #global-nav a img {
        height: 100%; 
        width: auto;
    }
}



/* Fixed */
#top-head.fixed {
    display: block; 
    position: fixed; /*ポジションを固定する*/
    top: 0px;/*一番上に設置*/
    left: 0px;
    z-index: 9999;  /*どの要素よりも上にくるように*/
    background: #F4F3E5;
    width: 100%; /*横幅を100%に*/
    padding: 0 0;
    }

#header_menu a {

    float: left; /*メニューを横並びにする*/
    font-size: 16px;
    color: #FFF;
    padding: 10px;
    }
    #header_menu a:after { /*floatでデザインが崩れないように*/
    display:block;
    clear: both;
    content:"";
    }

#top-head.fixed .logo {
    font-size: 24px;
    color: #333;
}

#top-head.fixed #global-nav ul li a {
    color: #333;

    padding: 0px 20px; /* menu文字の間 */
}

/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}

#nav-toggle div {
    position: relative;
}

#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {
    top: 0;
}

#nav-toggle span:nth-child(2) {
    top: 11px;
}

#nav-toggle span:nth-child(3) {
    top: 22px;
}

#global-nav li {
    margin: 0;  /* デスクトップビューでの右マージンをリセット */
}

/* スマホビュー時のメニューアイテムのマージン設定 */
@media only screen and (max-width: 1080px) {
    #global-nav li {
        margin-bottom: 10px;
    }
}


@media only screen and (max-width: 1079px) {
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding-top: 0;
        background: transparent;
    }
    #mobile-head {
        background: #F4F3E5;
        width: 100%;
        height: 60px;
        z-index: 999;
        position: relative;
    }

    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -1000px;
        background: #ffffff;  /* SPメニュー背景 */
        width: 100%;
        text-align: center; /* テキストを中央揃えにする */
        padding: 30px 0;

        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    
    #global-nav ul {
        flex-direction: column;  /* メニューを縦並びに */
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
        line-height: 2; /* SPメニュー行間 */
    }
    #global-nav li {

        margin-bottom: 15px; /* 例: 画像間の隙間を15pxに */
    }
    
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #3F3632;
        padding-top: 30px 0;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(1056px);
    }
}

.centered-menu {
    width: 100%;
    margin: auto;
        margin-top: 10px;
}

/* すべての要素にフォントを適用 */
body {
    font-family: 'Noto Sans JP', sans-serif;
}

  /* Montserrat フォントを使用するためのクラスを定義 */
  .menu-font,  .menu-font_s {
    font-family: 'Montserrat', sans-serif;
   display: inline-block; /* リンクを横並びにする */

  }

  .clearfix {
    clear: both;
}

/* Noto Sans JP フォントの @font-face ルール */
@font-face {
    font-family: 'Noto Sans JP';
    src: url('font/NotoSansJP-VariableFont_wght.ttf') format('truetype');

    font-style: normal;
  }
  
  /* Montserrat フォントの @font-face ルール */
  @font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
  }


/* フェードインアニメーション */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ふわっとする効果のスタイル */
.fade-in
 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}


.fade-inlogo {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* マウスオーバー時のスタイル */
.fade-in:hover,
.fade-inlogo:hover,
.menu-font a:hover {
    opacity: 1;
    transform: translateY(0);
}

/* メニュー項目にクリック時のスタイル（クリックしてもふわっとしない場合、不要なら削除） */
.menu-font a:focus {
    transform: translateX(5px) translateY(-5px);
    outline: none; /* クリック時のアウトラインを削除 */
}

/* ふわっとする効果のスタイル */
.fade-in.show,
.fade-inlogo.show {
    opacity: 1;
    transform: translateY(0);
}

.main {
    padding-top: 100px;

}

@media only screen and (max-width: 768px) {
    .main_contain {
        padding-top: 5px;
        width: 98%;
        margin: auto;

    }  
}  
@media screen and (min-width: 769px) {
    .main_contain {
        padding-top: 50px;
        width: 80%;
        margin: auto;
    }  
}  

/* Flexboxで3カラム／1カラムのレスポンシブ */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    
    .flex-section {
    width: 80%;
    padding-top: 20px;
    padding-bottom: 40px;
    margin: 40px auto 0;
    text-align: center;
    }

    
    
    /*dlタグの設定*/
    .flex-container{
            background: #E3E1BE;
    display: flex;
    justify-content: space-around;
    }
    .flex-item{

    color: #3F3632;
    padding: 1.5em;
    flex-basis: 30%;
    }


    .flex-img {
        width: 100%;
        display: block; /* 追加 */
        margin: 0 auto; /* 追加 */ 
        }
        .flex-item dt, .flex-item dd {
            text-align: left; /* 追加 */
            margin-bottom: 10px; /* dtのスタイルを継承 */
        }
        
        .flex-item dt {
            font-size: 1.2em;
            font-weight: bold;
        }

    @media only screen and (max-width: 768px) {
    h2{font-size: 1.1em;}
    .flex-container{flex-direction:column;}
    .flex-item{margin: 0 ;
    padding: 1.5em;}
}



/* ABOUT */
.about-section {
    max-width: 940px;
    margin: 40px auto;
    padding: 10px;
    line-height: 1.8;
}  
/* CONCEPT */

/* 共通スタイル */
.parent-container2 {
    display: flex;
    flex-wrap: wrap;  /* これにより子要素が次の行に折り返されるようにする */
}
/* 上段のスタイル */
.upper-row .container2:first-child {
    flex: 1 1 calc(70% - 30px); /* 左側を70%の幅にする */
    box-sizing: border-box;
    padding: 15px;
}

.upper-row .container2:last-child {
    flex: 1 1 calc(30% - 30px); /* 右側を30%の幅にする */
    box-sizing: border-box;
    padding: 15px;
}

/* 下段のスタイル */
.lower-row .container2:first-child {
    flex: 1 1 calc(40% - 30px); /* 左側を30%の幅にする */
    box-sizing: border-box;
    padding: 15px;
}

.lower-row .container2:last-child {
    flex: 1 1 calc(60% - 30px); /* 右側を70%の幅にする */
    box-sizing: border-box;
    padding: 15px;
}
.container2 {
    flex: 1 1 calc(50% - 30px); /* 50%の幅からパディングの分を引いたものに設定 */
    box-sizing: border-box;
    padding: 15px;
}
.cncept_text{
    line-height: 2; /* Sets the line height to 1.2 times the normal */
    letter-spacing: 0.2em; /* Increases the spacing between characters */
    font-family: 'Zen Old Mincho', serif;
    font-size: 120%;
    margin-top: 40px; /* 20ピクセルの内側余白を追加 */
    position: relative;
    z-index: 1; /* テキストのレイヤーを前面に持ってくる */
}

@media (max-width: 768px) {
    .cncept_text{
    line-height: 1.5; /* Sets the line height to 1.2 times the normal */
    letter-spacing: 0.1em; /* Increases the spacing between characters */
    font-family: 'Zen Old Mincho', serif;
    font-size: 100%;
    margin-top: 40px; /* 20ピクセルの内側余白を追加 */
    position: relative;
    z-index: 1; /* テキストのレイヤーを前面に持ってくる */

}
}

/* 以下はそのままのCSSを保持 */

.container2 img {
    max-width: 100%;
    height: auto;
}

/* スマホビューでのスタイル（たとえば、ビューポートの幅が768px以下の場合） */
@media (max-width: 768px) {
    .parent-container2 .container2,
    .upper-row .container2:first-child, 
    .upper-row .container2:last-child, 
    .lower-row .container2:first-child, 
    .lower-row .container2:last-child {
        flex: 1 1 100% !important; /* !important を使用して、スマホ表示時に100%の幅になることを確実にする */
        margin: 0;     
        padding: 5px; /* 元のパディングを維持 */
    }
}

.concept_big {
    font-size: 120%;
    font-weight: 800;
padding:0 0 40px 0 ;
}


.co_image01 {
    float: right; /* 画像を右側に配置 */
    margin-left: 20px; /* 画像とテキストの間に余白を設定 */

}

.concept_image {
    flex-basis: 267px; /* 基本幅を450pxに固定 */
    max-width: 267px; /* 幅の最大値を450pxに固定 */
    padding: 80px 20px;

    text-align: center; /* スマホ表示時に画像が左右中央に来るように */
}

.concept_image img {
    display: block;
    margin: 0 auto; /* 画像を中央配置 */
}

/* スマホ表示時の縦並びのスタイル（たとえば、ビューポートの幅が768px以下の場合） */
@media (max-width: 768px) {
    .concept_text, .concept_image {
        flex: 100%; /* スマホ表示時には、子要素が100%の幅を持つようになり、縦並びになる */
    }
}

.container2 img[src*="concept_01.svg"] {
width: 280px;
height: auto;
margin: 10px;
margin: 10px;
}

.container2 img[src*="concept_03.png"] {
    width: 480px;
    height: auto;
    margin: 10px;
    }
    
.concept_text {
    max-width: 100%; /* 100%の幅に広げることができます */
    text-align: left; /* テキストを左寄せにします */
    margin-bottom: 20px; /* 画像との間に余白を追加します */

}

.image-container {
    display: flex;
    width: 100%; /* 画像のコンテナを親要素の幅に合わせます */
    justify-content: space-between;
}

.image-container img[src*="concept_01.svg"] {
    width: 300px;
    height: auto;
    margin: 10px;
}

.image-container img[src*="concept_03.png"] {
    width: 400px;
    height: auto;
}

@media only screen and (max-width: 768px) {
    .image-container {
        flex-direction: column; /* スマホでは画像を縦並びにします */
        align-items: center; /* 画像を中央に配置します */
    }
}

.responsive-image {
    width: 50%;     /* 画像の横幅を50%に設定 */
    height: auto;   /* 画像の高さを自動に設定して、元のアスペクト比を保持 */
}


/*How to use*/
.how-section{
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;

}  
@media (max-width: 768px) {
    .how-section{
        padding: 5px;
    }
}

/* Examples */
.custom-list {
    display: flex;        
    list-style-type: none; 
    padding: 0;           
}

.custom-list-item {
    display: block;       /* 垂直に配置 */
    align-items: center;
    border: 2px dashed  #9e8942;  /* 点線の色を#666に変更 */     
    padding: 10px;
    margin: 10px;        
    flex: 1;   
       
}

.item-image {
    display: block;      /* 画像をブロック要素に */
    margin: 10px auto 10px; /* 画像の下に余白を追加 */
}

.item-text {
    display: block;      /* テキストをブロック要素に */
    text-align: left;    /* テキストを左寄せに */
    padding: 20px;
    margin:  10px; /* 余白を追加 */
}
@media (max-width: 768px) {
.item-text {
    display: block;      /* テキストをブロック要素に */
    text-align: left;    /* テキストを左寄せに */
    padding: 5px;
    margin:  5px; /* 余白を追加 */
}

}

.highlighted-text {
    background-color: #3F3632; /* 金色の背景色を設定 */
    margin: 0px 0px 0px 10px; /* 余白を追加 */
    padding: 2px;
    color: #FFF;
}

/*spec*/
.spec_container {
    max-width: 100%;
    margin:0;
    padding: 0 20px 20px 20px;

}  
 /* 4つ並び */
.spec_item { 
    width: 50%; /* スマホの場合、2つ横並びなので50% */
    float: left; /* 横に並べるためのフロート */
    box-sizing: border-box;
    padding: 5px; /* 任意の内側の余白 */
    position: relative; /* 子要素の画像を絶対位置にするため */
    text-align: center;  /* 左右中央に配置 */
    font-size: 90%;
    
  }
  
  .spec_item img {
    width: 100%; /* 画像を親の幅に合わせる */
    height: auto; /* アスペクト比を保持 */
    display: block; /* 縦余白を取り除くため */
  }
  
  /* デスクトップ向けのスタイル */
  @media (min-width: 768px) { /* 768pxをブレークポイントとしていますが、必要に応じて変更できます */
    .spec_item {
      width: 25%; /* 4つ横並びなので25% */
    }
  }

 /* 2つ並び */

 
/* SPECベースのスタイル */
.spec2_item {
    width: 100%; 
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;  /* 子要素を縦方向に並べる */
    justify-content: flex-end;  /* 子要素を下に寄せる */
    align-items: center;  /* 子要素を横方向の中央に寄せる */
    float: left;
}


.spec2_item-image, .spec2_item-text {
    flex: 1; /* 画像とテキストの領域を均等に分ける */
    padding: 10px 10px; /* 領域の間隔を開けるためのパディング */

}

@media (max-width: 768px) {
    .spec2_item-image, .spec2_item-text {
        flex: 1; /* 画像とテキストの領域を均等に分ける */
        padding: 5px 5px; /* 領域の間隔を開けるためのパディング */
    
    }
}


.spec2_item-text_cap {
    font-size: 80%;
}
.spec2_item img {
    width: 100%; /* 画像を親の幅に合わせる */
    height: auto; /* アスペクト比を保持 */
    display: block; /* 縦余白を取り除くため */
}

.specsize-image img {
    width: 250px;
    height: auto; /* アスペクト比を保持 */
    display: block; /* 縦余白を取り除くため */
}

/* spec表*/
table {
    margin-left: auto;
    margin-right: auto;
    width: 50%; /* 必要に応じてテーブルの幅を調整してください。例: 80% */
}
@media (max-width: 769px) {
    table {
        margin-left: 0;
        margin-right: 0;
        width: 100%; /* 必要に応じてテーブルの幅を調整してください。例: 80% */
        font-size: 90%;

    }
}

table td, table th {
    white-space: nowrap;
}

  thead th,
  tfoot th {

  }
  
  th {


  }
  
  td {

padding: 10px;
  }
  
  tbody td {
    text-align: left;
  }
  
  tfoot th {
    text-align: left;
  }


/* デスクトップ向けのスタイル */
@media (min-width: 768px) { /* 768pxをブレークポイントとしていますが、必要に応じて変更できます */
    .spec2_item {
        width: 50%; /* 2つ横並びなので50% */
    }
}
/* 防音効果について */
.bou-container {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 30px;
    margin-top:50px; /* 余白を設定 */
}

.bou-item {
    display: inline-block;
    margin: 0 10px; /* 余白を設定 */

}

.bou-arrow {
    display: inline-block;
    margin: 0 0px; /* 余白を設定 */
}

.bou_ {  
    width: 100%; /* 画像が画面幅に収まるように設定 */
    max-width: 300px; /* 最大幅を指定 */
}


@media screen and (max-width: 600px) {
    .bou-container {
        margin: 15px; /* 適切な余白を設定 */
        display: flex;
        overflow-x: auto;
        width: 100%;
        padding: 0;
        justify-content: flex-start; /* 画像を左端から並べる */
    }

    .bou-item {
        flex: 0 0 auto; /* アイテムが伸縮しないように設定 */
        margin: 0 5px; /* 適切な余白を設定 */
    }

    .bou_ {  
        width: 100%; /* 画像が画面幅に収まるように設定 */
        max-width: 300px; /* 最大幅を指定 */
    }
}

.bouon_item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bouon_img, .bouon_text {
    margin: 10px; /* 適切な余白を設定 */

}
.bouon_text {
    text-align: left; /* テキストを左寄せにする */
    font-size: 90%;
}

/* スマートフォンビュー用のスタイル（ブレークポイントは768pxと仮定） */
@media screen and (max-width: 768px) {
    .bouon_item {
        flex-direction: column;
        margin: 10px; /* 適切な余白を設定 */
        padding: 10px;
    }
    .bouon_img, .bouon_text  {
        margin: 10px; /* 適切な余白を設定 */
        padding:0 20px;
    }
    .bou_image01{
        width: 100%; /* 画像が画面幅に収まるように設定 */
    }
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

/* リサイクル素材について */
.rec-container {
    width: 90%x;         /* 画像の横幅を親要素の80%にする */
    display: flex;          /* 子要素を横並びにする */
    overflow-x: auto;       /* 横方向のオーバーフローをスクロール可能にする */
    white-space: nowrap;    /* 子要素が折り返されないようにする */
    align-items: center; /* これを追加 */

}

.rec_01, .rec_02, .rec_03 {
    display: flex;     /* 子要素をflexboxのアイテムとして扱う */
    flex-direction: column; /* 子要素を縦方向に並べる */
    flex: 0 0 auto;         /* 子要素が伸縮しないようにする */
    width: 250px;           /* 例として300pxの幅を設定 (適宜調整) */
    height: 400px;          /* 例として200pxの高さを設定 (適宜調整) */
    border: 0px solid #ccc; /* ボーダーを追加して要素が見えるようにする */
    box-sizing: border-box; /* ボーダーを含む全体のサイズとして計算 */
}
.rec_ar {
    display: grid;          /* rec_arをグリッドコンテナにする */
    place-items: center;    /* 子要素を中央に配置する */
    width: 30px;    
    border: 0px solid #ccc; /* 既存の設定 */
    box-sizing: border-box; /* 既存の設定 */
    flex: 0 0 auto;         /* 子要素が伸縮しないようにする */
    color:#8EA88E;
    font-weight: 500;
}

.rec_img{
    width: 200px;      
    padding: 10px;  
}

.rec_tx {
    width: 100%;           /* 親要素の全幅を使用する */
    white-space: normal;   /* テキストを自動で改行させる */
    box-sizing: border-box; /* ボーダーとパディングを含む全体のサイズとして計算 */
    padding: 30px;         /* 内部の余白を設定 (適宜調整) */
    word-wrap: break-word; /* 必要に応じて単語の途中でも改行させる */
    font-size: 90%;
}

@media only screen and (max-width: 768px) {
    .rec_01, .rec_02, .rec_03 {
        display: flex;     /* 子要素をflexboxのアイテムとして扱う */
        flex-direction: column; /* 子要素を縦方向に並べる */
        flex: 0 0 auto;         /* 子要素が伸縮しないようにする */
        width: 180px;           /* 例として300pxの幅を設定 (適宜調整) */

        border: 0px solid #ccc; /* ボーダーを追加して要素が見えるようにする */
        box-sizing: border-box; /* ボーダーを含む全体のサイズとして計算 */
    }
    .rec_img{
        width: 200px;      
        padding:0 5px ;  
    }

    }
    
/*スクロールバーの横幅指定*/
.scrollArea.deco::-webkit-scrollbar {
    width: 15px;
}
/*スクロールバーの背景色・角丸指定*/
.scrollArea.deco::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #f2f2f2;
}
/*スクロールバーの色・角丸指定*/
.scrollArea.deco::-webkit-scrollbar-thumb {
  border-radius: 10px;
	background:#8EA88E;
}

@media screen and (min-width: 768px) {
    .rec-container {
        overflow-x: hidden;  /* PCでは横スクロールを非表示にする */
    }
}

/* FAQ */

/* FAQアコーディオンのスタイル */
.faq input[type="checkbox"]:checked + .question + .answer {
    max-height: 200px;
    padding: 10px;
    opacity: 1;
}


.faq-section {
    max-width: 940px;
    margin: 40px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 0px solid #ddd;
}

.faq {
    margin-bottom: 20px;

}

.faq .question {
    display: block;
    font-size: 18px;
    padding: 10px;
    background-color: #f0f0f0;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    

}

.faq .answer {
    max-height: 0;       /* 初期状態では高さを0に設定 */
    opacity: 0;          /* 初期状態では透明に設定 */
    overflow: hidden;    /* コンテンツが見えないようにする */
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;  /* アニメーションを0.5秒で滑らかに */
    font-family: 'Noto Sans JP', sans-serif;
}

@media only screen and (max-width: 768px) {
    .faq .answer {
font-size: 90%;
    }
    .faq .question {
        font-size: 90%;
    }
}

.faq input[type="checkbox"] {
    display: none;
}

.faq input[type="checkbox"]:checked + .question + .answer {
    max-height: 200px;   /* アコーディオンが開かれたときの高さ */
    padding: 10px;
    opacity: 1;
}

.faq_container {
    text-align: center;  /* ボタンを左右中央に配置 */
    margin: 20px 0;      /* 上下のマージンを適用 (必要に応じて調整) */


}  

/* FAQ NEW */

.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa {
	border-top: 0px solid #adadad;
}
.cp_qa .cp_actab {
	position: relative;
	overflow: hidden;
	width: 95%;
	margin-bottom: 1px;
	color: #555555;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
	font-weight: bold;
	line-height: 1;
	position: relative;
	display: block;
	margin: 0 0 0 0;
	padding: 1em 2em 1em 1em;
	cursor: pointer;

}
@media only screen and (max-width: 768px) {
.cp_qa .cp_actab label {
    font-weight: normal;
}
}

.cp_qa .cp_actab label:hover {
	color: #979797;
}
/* 答え */


.cp_qa .cp_actab .cp_actab-content {
    max-height: 0;
    overflow: hidden;
    padding-left: 30px; /* 余白を設定するための値 */
    padding-right: 30px; /* 余白を設定するための値 */
    -webkit-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
    color: #3b3b3b;
    line-height: 2; /* 行間の高さを調整する */ 
   background: #fff
}
.cp_qa .cp_actab .cp_actab-content p {
	margin: 1em;
    padding: 10px;

}
/* 質問を開いた時の仕様 */
/* --アイコン */
.cp_qa .cp_actab input:checked ~ label {
	color: #555555;
}
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
	max-height: 40em;
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab label::after {
	line-height: 1.6;
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	width: 3em;
	margin-top: -12.5px;
	-webkit-transition: all 0.5s ease;
	        transition: all 0.5s ease;
	text-align: center;
}
.cp_qa .cp_actab input[type=checkbox] + label::after {
	content: '▼';
}
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
.tag2.section-anchor::after {

    content: "";
    display: block;
    border-bottom: 4px dotted #3b3b3b;/* 点線の横線のスタイルを設定 */
    margin-top: 10px; /* 横線の上側のマージンを調整 */
    margin-bottom: 20px; /* 横線の下側のマージンを調整 */

}
.section-anchor {
    margin-top: 30px;
}

/* 画面いっぱいに背景 */
.full_image {
    box-sizing: border-box;
}


@media screen and (min-width: 641px) {
  .full_image {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: url(images/main_pc.min.svg) center / 100% no-repeat;
    margin-top: 100px;
  }
}

@media only screen and (max-width: 768px) {
  .full_image {
    position: relative;
    width: 100%;
    padding-top: 109.33%;
    background: url(images/main_sp.min.svg) center / cover no-repeat;
    margin-top: 0;
  }
}

/* 問い合わせLINKバナー */
/* 共通スタイル */
.floating-menu-container {
    position: fixed;
    bottom: 0;
    right: 0;
    left: auto;
    z-index: 99999;
    display: flex;
    align-items: flex-end; /* 追加: 縦方向の終端にアイテムを配置 */
}



.floating-banner, .gototop-banner {
    display: inline-block;
}

.floating-banner__image {
    width: auto;
    height: 65px;
    transition: opacity 0.3s ease;
}

.gototop-banner__image {
    width: auto;
    height: 65px;
    transition: opacity 0.3s ease;
    
}

.floating-banner__image:hover, .gototop-banner__image:hover {
    opacity: 0.7;
}

/* PCの場合 */
@media screen and (min-width: 561px) {
    .floating-banner {
        order: 1; /* 下に配置 */

    }

    .gototop-banner {
        order: 0; /* 上に配置 */
        width: 70px;

    }
    .gototop-banner__image {
    padding-right: 10px;
}
}

/* スマホの場合 */
@media only screen and (max-width: 768px) {
    .floating-banner__image {
        width: auto; /* 画面の100%からgototop.pngの幅を引く */
        height: 65px;/* 追加: アスペクト比を保持 */
    }

    .gototop-banner__image {
        width: auto;
        height: 65px; /* 追加: アスペクト比を保持 */
    }
}



/* タイトル2段表記 */
ruby {
    display: inline-block;
    vertical-align: middle;
}

rt {
    font-size: 50%;
    display: block;
    text-align: center;
    font-weight: 200;
}

rp {
    display: none;
}

/* ロゴ画像表示 */
h1 {
    text-align: center;
    padding: 0;
    margin: 0 auto;
}

h1 a {
    display: block;
    width: 296px;
    height: 76px;
    background: url(images/header-logo.svg) center center/296px 76px no-repeat;
    margin: 0 auto;
    padding: 10px;
    font-size: 0;
}



h1.h1c_title img {
    height: 28px;  /* Set your desired height here */
    width: auto;  /* This ensures the image maintains its aspect ratio */

}


h2.h2nomal, h2.h2nomal_s {
    padding: .5em 1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 0px 50px/50px 20px;
    border: none;
    border-bottom: solid 2px #333;
    position: relative;  /* 追加 */
    display: flex; /* Flexコンテナを作成 */
    align-items: center; /* 垂直方向の中央揃え */
}

h2.h2nomal::after, h2.h2nomal_s::after {
    content: '';
    position: absolute;
    bottom: 0;  /* 線の位置に合わせる */
    right: 0;  /* 右端に配置 */
    width: 25px;  /* 画像の幅に合わせて調整 */
    height: 25px;  /* 画像の高さに合わせて調整 */
    background: url('images/nodo_ha.png') no-repeat;  /* 画像のパスを指定 */
    background-size: contain;
}
h2.h2nomal img {
    height: 30px;  /* Set your desired height here */
    width: auto;  /* This ensures the image maintains its aspect ratio */
    display: block;
    margin-top: 100px;
}

h2.h2nomal_s img {
    height: 30px;  /* Set your desired height here */
    width: auto;  /* This ensures the image maintains its aspect ratio */
    display: block;
    margin-top: 60px;
}

 .title-s {
    padding-top:  1em;
    font-size: 1rem;
    padding-left:  1.5em;
    padding-bottom:  2em;
 }

 @media (max-width: 769px) {
    .title-s {
        font-size: 80%;
        padding-left: 5px;
    }

    h2.h2nomal.h2nomal_2 img {
        height: 20px;  /* Set your desired height here */
        width: auto;  /* This ensures the image maintains its aspect ratio */
        display: block;
    }
    h2.h2nomal_s img {
        height: 25px;  /* Set your desired height here */
        width: auto;  /* This ensures the image maintains its aspect ratio */
        display: block;
    }
    
}

 .head2-border {
    display: flex;
    align-items: center;
    padding-top: 60px;
}
 
.head2-border:before,
.head2-border:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-image: linear-gradient(to right, #9e8942 50%, transparent 50%);
    background-size: 10px 2px;  /* このサイズを調整することで破線の長さや間隔を変えることができます */
}
 
.head2-border:before {
    margin-right: 1rem;
}
 
.head2-border:after {
    margin-left: 1rem;
}

/* メニュー項目にマウスオーバー時のスタイル */
.menu-font a:hover {
    transform: translateX(5px) translateY(-5px);
}

/* メニュー項目にクリック時のスタイル（クリックしてもふわっとしない場合、不要なら削除） */
.menu-font a:focus {
    transform: translateX(5px) translateY(-5px);
    outline: none;
}
*/* ont-weight プロパティ */
.fw1 {font-weight: normal;}
.fw2 {font-weight: bold;}
.fw3 {font-weight: 100;}
.fw4 {font-weight: 200;}
.fw5 {font-weight: 300;}
.fw6 {font-weight: 400;}
.fw7 {font-weight: 500;}
.fw8 {font-weight: 600;}
.fw9 {font-weight: 700;}
.fw10 {font-weight: 800;}
.fw11 {font-weight: 900;}
.center {
align-items: center;      /* 垂直方向の中央配置 */
}
/* SPEC 斜め線 */
.sectTit {
    position: relative;
    text-align: center;
    font-weight: bold;
    line-height: 1.0;
    font-family: 'Montserrat', sans-serif;
    padding: 0.5em 0 0.5em 0;
    font-weight: 600;
    font-size: 1.8rem;
  }
  .sectTit img {
    height: 30px;  /* Set your desired height here */

}

   
.sectTit:before,
.sectTit:after {
    position: relative;
    display: inline-block;
    content: "";
    background: #474644;
    width: 2px;
    height: 1.5em;
    margin: 0 1em;
    margin-top: -.2em;
    vertical-align: middle;
  }
   
.sectTit:before {
    transform: rotate(-35deg);/*角度調整*/
  }
   
.sectTit:after {
    transform: rotate(35deg);/*角度調整*/
  }

/* 角なしのスタイル */
.toc_or{
margin-top: 50px;
    padding: 1em 2em 2em;
    background-color: #E5F0DA  ; /*←背景色*/
    border-radius: 130px 0;

}
.toc_or::after {
    content: "";
    display: table;
    clear: both;
}
.toc_or-title {
    font-size: 1.2em;
    font-weight: 500;

    color: #8EA88E ; /*←タイトルの色*/
    margin: 1em;
}
 
.toc_or-content ol {
    position: relative;
}
 
.toc_or-container {
    padding: 1em 0 0 1.2em;

    list-style: none;
}
 
.toc_or a {

}
 
.toc_or-content ol li:before {
    font-family: FontAwesome; 
    content: "\f06c";  /*←見出しアイコン*/
    color: #fff  ; /*←見出しアイコンの色*/
    position: absolute;
    left : 1em;
}
 
.toc_or-content ol li:last-child {
    border-bottom: none;
}

/* 角なしのスタイル */
.toc{
    margin-top: 50px;
        padding: 1em 2em 2em;

        border-radius: 130px 0;
    
    }
    .toc::after {
        content: "";
        display: table;
        clear: both;
    }
    .toc-title {
        font-size: 1.2em;
        font-weight: 500;
    
        color: #8EA88E ; /*←タイトルの色*/
        margin: 1em;
    }
     
    .toc-content ol {
        position: relative;
    }
     
    .toc-container {
        padding: 1em 0 0 1.2em;
        border-bottom: double 1px #fff  ;
        list-style: none;
    }
     
    .toc a {
        color: #757575 ; /*←見出しの文字色*/
    }
     
    .toc-content ol li:before {
        font-family: FontAwesome; 
        content: "\f06c";  /*←見出しアイコン*/
        color: #fff  ; /*←見出しアイコンの色*/
        position: absolute;
        left : 1em;
    }
     
    .toc-content ol li:last-child {
        border-bottom: none;
    }
    .toc-spec {
    background-color: #fff  ; /*←背景色*/
}

.toc-consept {
    background-image: url('images/spec_bg.jpg'); /* Sets the background image */
    background-color: #fff; /* This will be the fallback color if the image fails to load */
    background-size: cover; /* This makes sure that the background covers the entire element */
    background-repeat: no-repeat; /* This prevents the image from repeating */
    background-position: center; /* This centers the image in the element */
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
     margin:0 auto;
     padding-top:50px;
 }
 
 .slider img {
     width:100%;/*スライダー内の画像を横幅100%に*/
     height:auto;
 }
 
 /*slickのJSで書かれるタグ内、スライド左右の余白調整*/
 
 .slider .slick-slide {
     margin:0 10px;
 }

 /*slider2*/

 .slider2 {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
     margin:0 auto;
     padding-top:50px;
 }
 
 .slider2 img {
     width:100%;/*スライダー内の画像を横幅100%に*/
     height:auto;
 }
 
 /*slickのJSで書かれるタグ内、スライド左右の余白調整*/
 
 .slider2 .slick-slide {
     margin:0 10px;
 }
 
 /*矢印の設定*/
 
 /*戻る、次へ矢印の位置*/
 .slick-prev, 
 .slick-next {
     position: absolute;/*絶対配置にする*/
     top: 35%;
     cursor: pointer;/*マウスカーソルを指マークに*/
     outline: none;/*クリックをしたら出てくる枠線を消す*/
     border-top: 2px solid #666;/*矢印の色*/
     border-right: 2px solid #666;/*矢印の色*/
     height: 15px;
     width: 15px;
 }
 
 .slick-prev {/*戻る矢印の位置と形状*/
     left: -1.5%;
     transform: rotate(-135deg);
 }
 
 .slick-next {/*次へ矢印の位置と形状*/
     right: -1.5%;
     transform: rotate(45deg);
 }
 
 /*ドットナビゲーションの設定*/
 
 .slick-dots {
     text-align:center;
     margin:20px 0 0 0;
 }
 
 .slick-dots li {
     display:inline-block;
     margin:0 5px;
 }
 
 .slick-dots button {
     color: transparent;
     outline: none;
     width:10px;/*ドットボタンのサイズ*/
     height:10px;/*ドットボタンのサイズ*/
     display:block;
     border-radius:50%;
     background:8EA88E;/*ドットボタンの色*/
 }
 
 .slick-dots .slick-active button{
     background:#a09f9f;/*ドットボタンの現在地表示の色*/
 }
 
 /*botton*/

 .btn,
a.btn,
button.btn {

  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

 .btn--01,
a.btn--01 {
  color:  #3f3632;
  background-color: #ebebeb;
  border: 2px solid #645754;
}
.btn--01:hover,
a.btn--01:hover {
  color: #3f3632;
  background:  #8EA88E;
}

a.btn--radius {
    border-top-left-radius:100vh;
    border-bottom-right-radius:100vh;

}
/* バナー */

.banner-container {
    width: 100%;
    text-align: center;
    padding-top: 50px;
    padding-bottom:50px;
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 追加するCSS */
@media screen and (min-width: 1201px) { /* 1201px以上のデバイスで適用 */
    .banner-image {
        max-width: 940px; /* 画像の最大幅を1200pxに制限 */
    }
}

/* フッター */
.footer {
    padding: 1rem;
    font-size: 15px;
    color: #999;
    
  }



  .footer_navi {
    flex-wrap: wrap;

    margin-bottom: 2rem;
  }
  
  .footer_navi {
    display: flex;  /* 子要素を横並びにする */
    justify-content: center;  /* 子要素を中央に配置 */
    margin: 0 auto;  /* 親要素の中央に配置 */
}
  
  .footer_navi li:not(:last-child) {
    margin-right: 16px;
  }

  .footer_navi li {
    list-style-type: none;  /* リストマーカーを非表示にする */
}

  .footer_logo {
    display: inline-block;
    margin-bottom: 1rem;
  }

  .flex_f {
    display: flex;
  }

  .md-flex {
    justify-content: center; /* 子要素を水平方向の中央に配置 */
}

.footer_navi li:not(:last-child) {
    margin-right: 16px; /* リンクの間隔を調整 */
}

  
  @media (min-width: 768px) {
    .md-flex {
      display: flex;
    }
  
    .md-justify-between {
      justify-content: space-between;
    }
  
    .copyright {
      text-align: center;
      margin-top: 50px;
      margin-bottom: 150px;
    }


  }
  @media (max-width: 769px) {
    .copyright {
        font-size: 10px;
        text-align: center;
        margin-bottom: 150px;
        }       }
  .insta-img {

    width:30px;
   }
   @media (max-width: 769px) {
   .insta-img {
    padding-top: 0px;

       }       }
 /* 線がちょっと上むく */
       .randamline {
        padding: .5em 1em;

        border-radius: 10px 50px/50px 10px;
        border-top: 0;             /* 上の線を消す */
        border-right: 0;           /* 右の線を消す */
        border-left: 0;            /* 左の線を消す */
        border-bottom: dashed 2px #333;  /* 下の線のみ表示 */
      }
     /* 線がちょっと上むく */  
      .main_contain{
        clear: both;
    }


    /* デフォルトでは非表示にしておく */
.break-for-tablet {
    display: none;
    margin: 20px;
}

/* 768px 以下のデバイスのみに改行*/
@media only screen and (max-width: 768px) {
    .break-for-tablet {
        display: block;  /* 改行のためのブロック要素として表示 */
        margin: 20px;
    }
}

.custom-underline {
    /* 下線のカスタマイズに関するスタイルをここに書く */
    text-decoration: underline; /* 例として標準の下線 */
    /* 他のスタイルも追加できます */
}

    /*会社概要 */

    .com_center {
        margin-left: auto;
        margin-right: auto;
        padding: 200px; /* 左右の余白を10pxに変更 */
        padding-bottom: 10px; /* 下部の余白サイズ */
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    table.com_center {
        width: 80%;
        border-collapse: collapse; /* セル間の境界線を統合 */
    }
    
    table.com_center th {
        font-weight: bold; /* th要素を太字にする */
        border-bottom: 1px solid #000; /* セルの下に線を追加 */
        padding: 30px; /* セル内の余白を増やす */
    }
    
    table.com_center td {
        border-bottom: 1px solid #000; /* セルの下に線を追加 */
        padding: 12px; /* セル内の余白を増やす */
    }
    
    /* 奇数行の背景色を設定（オプション） */
    table.com_center tbody tr:nth-child(odd) {
        background-color: #f2f2f2;
    }

/* VIDEO*/
.video-container {
    text-align: center;
    background-color: #fff;
}

video {
    width: 100%;
    height: auto;
    max-width: 800px;
    margin: auto;
}

@media (min-width: 600px) {
    .video-container {
        padding: 20px;
    }
}

/* 新しいスタイル */
@media (min-width: 600px) { /* PCの画面サイズに適用 */
    .video-container.small-video video {
        max-width: 300px; /* PCでの最大幅を300pxに設定 */
    }
}


/* moto */
.mt_content-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

.mt_video-container {
    margin-right: 20px; /* ビデオと画像の間隔 */
}

.mt_side-image {
    /* 画像のスタイル */
}

@media (min-width: 600px) {
    .mt_video-container.small-video video {
        max-width: 300px;
    }
}

@media (max-width: 600px) {
    .mt_content-container {
        flex-direction: column;
    }

    .mt_video-container,
    .mt_side-image {
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
    }
}

.text-right {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20%;  
    text-align: right;
    font-size: small;
}

.text-back {
    font-size: small;
}

.mt_side-image02 {
    width: 40%;
    float: right; /* 画像を右に配置 */
    margin-left: 20px; /* 画像とテキストの間にマージンを設定 */
    cursor: pointer; /* カーソルをポインターに変更 */
}

@media (max-width: 600px) {
    .mt_side-image02 {
    width: 100%; 
}


}

.text-image-wrapper {
    overflow: hidden; /* コンテンツが float している場合のレイアウト崩れを防ぐ */
}

/* モーダルウィンドウのスタイル */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }
  
  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }
  
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
  }
  @media screen and (max-width: 768px) {
    .modal {
      display: none !important; /* スマホ表示でモーダルを非表示にする */
    }
  }
  

  .examples-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(16px, 3vw, 28px);
margin-top: 2rem;
}


.example-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.example-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}


.example-image {
width: 100%;
height: auto;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}


.example-body {
padding: 1.25rem 1.5rem 1.5rem;
}


.example-title {
font-size: 1.25rem;
font-weight: 700;
color: #333;
margin: 0 0 0.5rem;
}
.example-title span {
color: #8EA88E;
}


.example-client {
font-size: 0.95rem;
color: #666;
margin-bottom: 0.75rem;
}


.example-voice {
font-style: italic;
background: #f7f9f7;
border-left: 4px solid #8EA88E;
margin: 0;
padding: 0.75rem 1rem;
border-radius: 6px;
color: #444;
}


@media (max-width: 768px) {
.example-body {
padding: 1rem;
}
.example-title {
font-size: 1.1rem;
}
}


.about-intro p {
max-width: 760px;
margin: 1.2rem auto 2.5rem;
font-size: 1.05rem;
line-height: 1.9;
color: #4b4946;
text-align: center;
}


.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(16px, 3vw, 32px);
}


.about-card {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}


.about-img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 4/3;
display: block;
}


.about-card-body {
padding: 1.5rem 1.5rem 2rem;
}


.about-title {
font-size: 1.25rem;
color: #2e2d2b;
margin-bottom: 0.75rem;
border-left: 5px solid #8EA88E;
padding-left: 0.6rem;
font-weight: 700;
}


.about-card p {
font-size: 0.98rem;
line-height: 1.8;
color: #555;
}


@media (max-width: 768px) {
.about-intro p { font-size: 1rem; padding: 0 1rem; }
.about-title { font-size: 1.15rem; }
.about-card-body { padding: 1.25rem; }
}

/* ===== Recycle Section (背景デフォルト・矢印あり) ===== */
.recycle-section {
  background: transparent; /* サイト全体のデフォルト背景を継承 */
  padding: clamp(2rem, 5vw, 4rem) 0;
}

/* PC 3カラム */
.recycle-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* step→arrow→step→arrow→step */
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.recycle-step {
  background: none; /* 背景はデフォルト */
  border-radius: 14px;
  text-align: center;
  transition: transform 0.25s ease;
}
.recycle-step:hover { transform: translateY(-4px); }

.recycle-img {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 0.75rem;
  display: block;
  object-fit: contain;
}
.recycle-step h4 {
  font-size: 1.1rem;
  color: #326338;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.recycle-step p {
  font-size: 0.95rem;
  color: #4b4946;
  line-height: 1.7;
}

/* 矢印 */
.recycle-arrow {
  font-size: 2rem;
  color: #8EA88E;
  text-align: center;
  font-weight: 700;
}

/* スマホは横スクロール＆3枚表示 */
@media (max-width: 768px) {
  .recycle-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.5rem;
  }
  .recycle-track::-webkit-scrollbar { height: 6px; }
  .recycle-track::-webkit-scrollbar-thumb {
    background: #cbd5cc;
    border-radius: 999px;
  }

  .recycle-step {
    flex: 0 0 calc((100% - 2rem) / 3); /* 3枚が見える幅 */
    scroll-snap-align: center;
  }
  .recycle-arrow { display: none; } /* スマホでは矢印非表示 */
  .recycle-img { max-width: 180px; }
}

/* ================================
   NAV: Font + Breakpoints override
   ================================ */

/* ベース高と余白（PC） */
:root{
  --navH: 64px;            /* 行の高さ */
  --navGap: 64px;          /* メニューの左右間隔 */
  --navFont: clamp(18px, 2.2vw, 28px); /* テキストサイズ */
}

/* ヘッダー帯をもう少し上に寄せる */
#global-nav{ margin-top:-12px; }

/* 行・整列 */
#global-nav ul{
  display:flex !important;
  flex-wrap:wrap;                 /* 狭い幅では自動で折り返し */
  align-items:flex-end;
  justify-content:center;
  gap: var(--navGap) 24px;        /* col-gap=間隔 / row-gap=24px */
  padding:0; margin:0; list-style:none;
}

/* 各アイテムの箱 */
#global-nav li{ min-width:0; }

/* リンク本体（高さ合わせ＋中央寄せ） */
#global-nav a{
  display:flex !important;
  align-items:center;
  justify-content:center;
  height: var(--navH) !important;
  padding: 0 4px;
  line-height: 1;                 /* 下の余白消し */
  color:#2b2523 !important;
  text-decoration:none;
  /* ← さっきのフォント（細めのMontserrat） */
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: .06em !important;
  font-size: var(--navFont) !important;
}

/* 旧: 画像ベース指定の影響を打消し */
#global-nav a img{
  display:block;
  height:auto !important;
  max-height:none !important;
}

/* Instagramだけ固定サイズ */
#global-nav .nav-ig{ flex:0 0 auto; }
#global-nav .nav-ig a{ padding:0 6px; }
#global-nav .nav-ig img{
  width: clamp(20px, 2.2vw, 26px) !important;
  height: clamp(20px, 2.2vw, 26px) !important;
  aspect-ratio:1/1; object-fit:contain; display:block;
}
/* 念のため、ファイル名でも拘束 */
#global-nav a img[src*="Instagram_Glyph"]{
  width: clamp(20px, 2.2vw, 26px) !important;
  height: clamp(20px, 2.2vw, 26px) !important;
}

/* ---------- Breakpoints ---------- */
/* 1200px↓：少しコンパクトに */
@media (max-width: 1200px){
  :root{
    --navH: 58px;
    --navGap: 48px;
    --navFont: clamp(17px, 2.1vw, 24px);
  }
}

/* 992px↓：さらに圧縮 */
@media (max-width: 992px){
  :root{
    --navH: 52px;
    --navGap: 36px;
    --navFont: clamp(16px, 2.0vw, 22px);
  }
}

/* 768px↓（モバイル）：1～2段に自然に分かれる */
@media (max-width: 768px){
  :root{
    --navH: 44px;
    --navGap: 24px;
    --navFont: clamp(15px, 4.6vw, 20px);
  }
  #global-nav{ margin-top:-6px; }
}

/* 480px↓：指でタップしやすい最小確保 */
@media (max-width: 480px){
  :root{
    --navH: 42px;
    --navGap: 18px;
    --navFont: clamp(14px, 5.2vw, 18px);
  }
}
/* ===== NAV: Bold + Mobile condense & centering ===== */

/* 全デバイス：フォントを太字（見出し感を出す） */
#global-nav a{
  font-weight: 700 !important;   /* Montserratは 600〜700 が視認性◎ */
  line-height: 1.15 !important;  /* 2行のときの行間をやや詰める */
  text-align: center !important; /* 文字自体も中央寄せ */
}

/* 行の間隔：列（左右）は広め、行（上下）は狭めに */
#global-nav ul{
  column-gap: var(--navGap) !important; /* 左右の間隔 */
  row-gap: 6px !important;              /* 上下の間隔をキュッと */
  justify-content: center !important;   /* 全体を中央寄せ */
  align-items: flex-end !important;
}

/* モバイル：さらに詰める＆中央揃えを強化 */
@media (max-width: 768px){
  #global-nav a{
    line-height: 1.05 !important; /* 2行タイトルの行間をさらに圧縮 */
    padding: 0 2px !important;    /* 余白を少し削る */
  }
  #global-nav ul{
    column-gap: 18px !important;  /* 左右の間隔を少し狭く */
    row-gap: 4px !important;      /* 行間をさらに詰める */
    justify-content: center !important;
  }
}

/* 480px以下：最小タップ領域を確保しつつ詰める */
@media (max-width: 480px){
  #global-nav a{
    line-height: 1.03 !important;
  }
  #global-nav ul{
    column-gap: 14px !important;
    row-gap: 3px !important;
  }
}
/* ===== NAV text: smaller + no wrap for "How to use" ===== */
:root{
  --navH: 50px;                             /* そのまま */
  --navFS: clamp(13px, 1.5vw, 18px);        /* 全体の文字サイズを少し小さめに */
}

/* テキスト幅を詰めて折返しを防止 */
#global-nav a{
  font-size: var(--navFS) !important;
  letter-spacing: .02em !important;         /* 既存の .1em を上書きして幅を節約 */
  white-space: nowrap !important;           /* すべて基本は折り返さない */
}

/* “How to use” は絶対に改行させない（保険） */
#global-nav a[href="#howto"]{
  white-space: nowrap !important;
}

/* モバイルはさらに微調整（高さを少し上げ、サイズは固定小さめ） */
@media (max-width: 768px){
  :root{ --navH: 34px; --navFS: 15px; }
  #global-nav ul{ column-gap: 14px !important; row-gap: 4px !important; }
}

/* 480px以下の超小画面はほんの少しだけ縮める */
@media (max-width: 480px){
  :root{ --navFS: 14px; }                   /* さらに1pxダウン */
  #global-nav a[href="#howto"]{ font-size: 13.5px !important; } /* 予備の微縮小 */
}
/* ===== Floating Action Dock ===== */
.fab-dock{
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 20px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

/* pill buttons */
.fab{
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  border-radius: 999px;
  padding: .55rem .9rem;
  font: 700 0.95rem/1.1 'Montserrat', sans-serif;
  letter-spacing: .06em;
  color: #2e2d2b;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}

.fab:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.fab:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,.10); }

/* contact = アクセント色 */
.fab-primary{
  background: #8EA88E;
  color: #fff;
  border-color: rgba(0,0,0,.0);
}
.fab-primary:hover{ background: #7b987b; }

/* “Top” はデフォ非表示 → スクロールで出す */
.fab-top{ opacity: 0; pointer-events: none; }
.fab-top.is-visible{ opacity: 1; pointer-events: auto; }

/* モバイルは少し小さく */
@media (max-width: 768px){
  .fab{ padding: .5rem .8rem; font-size: .9rem; min-width: 74px; }
  .fab-dock{ gap: 8px; }
}

/* 低モーション環境配慮 */
@media (prefers-reduced-motion: reduce){
  .fab{ transition:none }
}
.logo-text {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  color: #333;
}

/* FAQ下の横線をContactと同じ長さに合わせる */
.handwritten-line {
  width: 80%;       /* Contactの横線と同じ長さに調整（数値は合わせて調整OK） */
  max-width: 800px; /* 最大幅を指定して中央揃え */
  height: 2px;      /* 線の太さ */
  background-color: #000; /* 線の色（Contactと同じに） */
  margin: 40px auto; /* 上下余白と中央揃え */
}



/* 右上固定の言語スイッチ JP｜EN */
.lang-switch-fixed {
  position: fixed;
  top: 18px;
  right: 30px;
  z-index: 999;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  padding: 5px 12px;
  backdrop-filter: blur(4px);
  transition: opacity 0.4s ease;
}

/* 現在の言語は白、他は半透明 */
.lang-switch-fixed a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}

.lang-switch-fixed a:hover {
  color: #fff;
}

.lang-switch-fixed .lang-current {
  color: #fff;
  cursor: default;
}

/* スクロール中に非表示 */
.lang-switch-fixed.hidden {
  opacity: 0;
  pointer-events: none;
}
/* --- スマホメニュー内 言語切替 --- */
.nav-lang-sp {
  display: flex;                 /* 横並びにする */
  justify-content: center;
  align-items: center;
  gap: 8px;                      /* JPとENの間隔 */
  margin-top: 1.5em;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #333;
  border-top: 1px solid #ddd;
  padding-top: 1em;
}

.nav-lang-sp::before {
  content: "|";                  /* 中央の縦棒を表示 */
  color: #aaa;
  margin: 0 4px;
  position: relative;
  top: 0;                        /* 棒の位置を中央揃え */
}

.nav-lang-sp a {
  text-decoration: none;
  color: #555;
  transition: color 0.3s ease;
}

.nav-lang-sp a:hover {
  color: #000;
}

.nav-lang-sp .lang-current {
  color: #000;
  font-weight: 600;
  cursor: default;
}

/* --- PC版では非表示 --- */
@media (min-width: 769px) {
  .nav-lang-sp {
    display: none;
  }
}

/* PC：右上固定JP｜ENを表示（従来どおり） */
@media (min-width: 769px){
  .lang-switch-fixed{ display:inline-flex; }
  .nav-lang-sp{ display:none; }   /* メニュー内の言語切替はPCで非表示 */
}

/* SP：右上固定JP｜ENは消す。メニュー内のJP｜ENだけ表示 */
@media (max-width: 768px){
  .lang-switch-fixed{ display:none !important; }  /* ←これで消える */
  .nav-lang-sp{ display:flex; }                   /* ←横並びで表示 */
}
/* Loading screen 全体 */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f5f2; /* 柔らかい背景色 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease;
}

/* ゆっくり呼吸する円アニメーション */
.loader-circle {
  width: 40px;
  height: 40px;
  border: 2px solid #aaa;
  border-radius: 50%;
  animation: breathe 2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* Loading文字 */
#loading-screen p {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #666;
  letter-spacing: 0.1em;
}

/* ページ読み込み完了時にフェードアウト */
body.loaded #loading-screen {
  opacity: 0;
  pointer-events: none;
}

/* Loading文字 */
#loading-screen p {
  margin-top: 12px;
  font-size: 1.2rem;
  color: #7a8675;  /* やさしい緑グレー */
font-family: 'Quicksand', 'Poppins', sans-serif;
  font-weight: 400;
  letter-spacing: 0.15em;  /* ← 少し広めでやさしい印象 */
  text-transform: lowercase;  /* ← 小文字で柔らかい */
}
.loader-circle {
  width: 40px;
  height: 40px;
  border: 2px solid #7a8675; /* ← 緑グレーに変更 */
  border-radius: 50%;
  animation: breathe 2s ease-in-out infinite;
}