<!-- １Menu 開閉型 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
&nbsp; &nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
&nbsp; &nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<style>
.main1 { border: 1px solid #000;border-radius: 5px;margin: 0 auto;width: 65%;padding: 0 20px 10px 20px;background: #fff;box-sizing: border-box; }
.main1 p { line-height: 24px;font-size: 1rem; }
.main1 h1 { font-size: 26px !important; margin: 30px 0;text-align: center; color: #000 }
.main1 h2 { margin: 0 0 10px 0; color: #000; font-size: 1rem; line-height:1.2; text-align: left }
.main1 p,.main1 .product_dec div { margin: 0; padding: 0 0 20px 0; color: #333; text-align: left }
.margin-bottom_change{ padding-bottom: 10px !important }
h2 { position: relative;background: #1190d9;line-height: 1.4;padding: 10px 10px 10px 40px;color: #fff !important; }
.product_dec h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f328"; }
.pay h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f53d";font-weight: 900; }
.ship h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f48b"; font-weight: 900; }
.term h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f508"; font-weight: 900; }
.warning h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f071";font-weight: 900;  }
.main1 h2:after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  color: #ffffff;
  font-weight: 900;
float: right;
 
}
.main1 h2[aria-expanded="true"]:after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  color: #ffffff;
  font-weight: 900;
  float: right;
  
}
</style>

<div class="main1"><h1>Item Title</h1>
<div class="product_dec accordion-box">
<h2 data-toggle="collapse" href="#collapse1" aria-expanded="true">Description</h2>
<p id="collapse1" class="collapse">こちらに商品説明を入力してください。
</p>
</div>

<div class="pay">
<h2 data-toggle="collapse" href="#collapse2" aria-expanded="true">Payment</h2>
<p id="collapse2" class="collapse">こちらに支払い方法を入力してください。
</p>
</div>
<div class="ship">
<h2 data-toggle="collapse" href="#collapse3" aria-expanded="true">Shipping</h2>
<p id="collapse3" class="collapse">こちらに発送方法を入力してください。
</p>
</div>
<div class="term">
<h2 data-toggle="collapse" href="#collapse4" aria-expanded="true">Terms of Sale</h2>
<p id="collapse4" class="collapse">こちらに取引事項を入力してください。
</p>
</div>
<div class="warning">
<h2 data-toggle="collapse" href="#collapse5" aria-expanded="true">Please Note</h2>
<p id="collapse5" class="margin-bottom_change collapse">輸入関税、税金、および料金は、商品価格または送料には含まれません。これらの追加費用は、入札または購入前に税関に確認してください。
</p>
</div>

</div>

<!-- menu固定型 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<style>
.main1 { border: 1px solid #000;border-radius: 5px;margin: 0 auto;width: 65%;padding: 0 20px 10px 20px;background: #fff;box-sizing: border-box; }
.main1 p { line-height: 24px;font-size: 1rem; }
.main1 h1 { font-size: 26px !important; margin: 30px 0;text-align: center; color: #000 }
.main1 h2 { margin: 0 0 10px 0; color: #000; font-size: 1rem; line-height:1.2; text-align: left }
.main1 p,.main1 .product_dec div { margin: 0; padding: 0 0 20px 0; color: #333; text-align: left }
.margin-bottom_change{ padding-bottom: 10px !important }
h2 { position: relative;background: #1190d9;line-height: 1.4;padding: 10px 10px 10px 40px;color: #fff !important; }
.product_dec h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f328"; }
.pay h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f53d";font-weight: 900; }
.ship h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f48b"; font-weight: 900; }
.term h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f508"; font-weight: 900; }
.warning h2:before { position: absolute;left: 0.5em;font-family: "Font Awesome 5 Free";content: "\f071";font-weight: 900;  }
</style>

<div class="main1"><h1>Item Title</h1>
<div class="product_dec">
<h2>Description</h2>
<p>こちらに商品説明を入力してください。
</p>
</div>

<div class="pay">
<h2>Payment</h2>
<p>こちらに支払い方法を入力してください。
</p>
</div>
<div class="ship">
<h2>Shipping</h2>
<p>こちらに発送方法を入力してください。
</p>
</div>
<div class="term">
<h2>Terms of Sale</h2>
<p>こちらに取引事項を入力してください。
</p>
</div>
<div class="warning">
<h2>Please Note</h2>
<p class="margin-bottom_change">輸入関税、税金、および料金は、商品価格または送料には含まれません。これらの追加費用は、入札または購入前に税関に確認してください。
</p>
</div>

</div>