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

html {
  scroll-behavior: smooth;
}

/* 
------------------------------
リセットCSS
------------------------------
*/	
html {
	font-size: 62.5%;/* ルートのフォントサイズ10px */
} 
body {
	font-size:14px;
	font-size:1.4em;/* 14px*/
	line-height:1.5;
}	
body {
	width:100%;
	margin:0 auto 0 auto;
	padding:0;
	letter-spacing:0.05em;
	color:#666;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /* スマホで勝手に文字が大きくなる対策 */
	-webkit-text-size-adjust: 100%;
}
body img {
  border:0;
}

/* ウィンドウサイズに合わせて画像サイズを自動で伸縮させる */
img,iframe {
	max-width:100%;
	height:auto;
}
/* ウィンドウサイズに合わせて画像サイズを自動で伸縮させる */

* {
  box-sizing: border-box;
  list-style-type: none;
}

ul,ol {
	margin:0;
	padding:0;
}

p {
	margin:0;
	padding:0;
}

/*リンク画像透明*/
a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha(opacity=70 )";
	background:#FFF;
}
/*リンク画像透明*/

/*リンク下線有り*/
a {text-decoration:underline;}
/*リンク下線有り*/

/*リンク色*/
a:link {color:#1558d6;}
/*リンク色*/

/*リンクhover時下線*/
a:hover {text-decoration:none !important;} 
/*リンクhover時下線*/
/* 
------------------------------
リセットCSS
------------------------------
*/



/*width*/
.width-98 {
	width: 98% !important;
	margin: auto;
}
.width-96 {
	width: 96% !important;
	margin: auto;
}
.width-95 {
	width: 95% !important;
	margin: auto;
}
.width-94 {
	width: 94% !important;
	margin: auto;
}
.width-92 {
	width: 92% !important;
	margin: auto;
}
.width-90 {
	width: 90% !important;
	margin: auto;
}
.width-88 {
	width: 88% !important;
	margin: auto;
}
.width-85 {
	width: 85% !important;
	margin: auto;
}
.width-84 {
	width: 84% !important;
	margin: auto;
}
.width-80 {
	width: 80% !important;
	margin: auto;
}
/*width*/

/*下margin*/
.margin-bottom1 {
	margin-bottom:1% !important;
}
.margin-bottom2 {
	margin-bottom:2% !important;
}
.margin-bottom3 {
	margin-bottom:3% !important;
}
.margin-bottom4 {
	margin-bottom:4% !important;
}
.margin-bottom5 {
	margin-bottom:5% !important;
}
/*下margin*/

/*上margin*/
.margin-top-1 {
	margin-top:-1% !important;
}
.margin-top-2 {
	margin-top:-2% !important;
}
.margin-top-3 {
	margin-top:-3% !important;
}
.margin-top-4 {
	margin-top:-4% !important;
}
/*上margin*/



/* ▼ヘッダー▼ */
header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2px 0 0 0;
  line-height: 0;
}
header p#header-topgold {
	width: 44.5%;
  min-width: 222px;
  margin: 0 0 0 1%;
  padding: 0;
}
header p#header-goldorder {
	width: 27.5%;
	min-width: 137px;
  margin: 0 1% 0 0;
  padding: 0;
}
/* ▲ヘッダー▲ */

/* ▼パンくず▼ */
#pankuzu {
  background-color: #F9F9F9;
  width:96%;
  margin:0 auto 0 auto;
	padding:10px 0 10px 0;
	font-size: 1.1rem;
	letter-spacing: 0;
}
#pankuzu ol {
	margin:0 2% 0 2%;
	padding:0;
	list-style:none;
}
#pankuzu li {
	display:inline;
	margin:0;
	padding:0;
}
#pankuzu a:link {color:#595757;}
#pankuzu a:visited {color:#595757;}
#pankuzu a:hover {color:#9C9B9B;}
#pankuzu a:active {color:#595757;}
/* ▲パンくず▲ */

/* ▼メインコンテンツ▼ */
main {
  width: 100%;
  margin: 0 0 200px 0;
  padding: 0;
}

h1 {
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 0;
}

h2 {
  background-color: #8FC320;
  border-radius: 8px;
  width: 100%;
  margin: 8% auto 3% auto;
  padding: 3%;
  font-size: 1.4rem;
  color: #FFFFFF;
}

p#calculation {
  font-family: serif;
  font-size: 4vw;
  font-weight: bold;
  text-align: center;
  margin: 0 0 3% 0;
}

p#update-date {
  width: 96%;
  margin: 0 auto 1% auto;
  padding: 0;
  font-size: 1.2rem;
  text-align: center;
}
#gold-price {
  width: 94%;
	margin: 0 auto 5% auto;
	padding: 0;
}
.gold-price-box {
  width: 100%;
	margin: 0 auto 6% auto;
	padding: 0;
}
.gold-price-box h3 {
  width: 96%;
	margin: 0 auto 0 auto;
	padding: 9px 0 9px 0;
	font-size: 2.7rem;
	line-height: 1.5;
	text-align: center;
	color: #666;
}
.gold-price-box h3#color-gold {
  background-color: #fcf969;
}
.gold-price-box h3#color-platinum {
  background-color: #E5E4E2;
}
.gold-price-box table {
	border-collapse: collapse;
	width: 96%;
	margin: 0 auto 0 auto;
	padding: 0;
}
.gold-price-box table th {
	background-color: #F5F5F5;
	width: 50%;
	margin: 0;
	padding: 10px 0 10px 10px;
	font-size: 1.6rem;
  text-align: left;
	border: 1px solid #999;
}
.gold-price-box table td {
	margin: 0;
	padding: 10px 10px 10px 0;
	font-size: 1.6rem;
  font-weight: bold;
  text-align: right;
	border: 1px solid #999;
}

p#description {
	width: 90%;
	margin:0 auto 0 auto;
	padding:0;
	font-size:1.3rem;
	font-weight:bold;
	line-height:1.3;
}
/* ▼キット申込フォーム▼ */
#input-form {
	width: 95%;
	margin:0 auto 8% auto;
	padding: 0;
	font-size: 1.3rem;
}
#input-form .form {
	margin: 0;
	padding: 1em;
	background: #fef4b1;
}
#input-form span.need {
	color: #FF0000;
}
#input-form .label_block {
	display: block;
  line-height: 1.8;
}
#input-form input[type=text] {
	font-size: 15px;
}
#input-form input[type=text].box01 {
	width: 30%;
}
#input-form input[type=text].box02 {
	width: 25%;
}
#input-form input[type=text].box03 {
	width: 80%;
}
#input-form input[type=submit] {
	font-size: 15px;
  /*スマホでボタンが見えないので削除
	background: #FFF;
  */
}
#input-form p#identification1 {
	margin:0 1% 1% 0;
	padding:0;
	font-size:1.1rem;
	line-height:1.5;
	letter-spacing:0.05em;
	/*Androidブラウザフォントバグ対策*/
	max-height: 999999px;	
}
.identification-back {
		 font-size: 1.1rem;
	 }
#input-form p#identification2 {
	margin:1.5% 1% 0 0;
	padding:0;
	font-size:1.1rem;
	line-height:1.5;
	letter-spacing:0.05em;
	/*Androidブラウザフォントバグ対策*/
	max-height: 999999px;	
}
/* ドメイン受信設定のお願い */
#input-form p#domain {
	margin:1% 0 0 0;
	padding:0;
	padding-left:1em;
	text-indent:-1em;
	font-size:1.2rem;
	line-height:1.5;
	letter-spacing:0.05em;
}
#input-form span#domain_character {
	font-weight:bold;
	color:#06F;
}
#input-form span#domain_address {
	margin:0;
	padding:0;
	font-size:1.4rem;
	font-weight:bold;
	line-height:1.5;
	letter-spacing:0.05em;
	color:#06F;
}
/* ドメイン受信設定のお願い */
#input-form p#minor {
	margin:0 1% 0 0;
	padding:0 0 2% 0;
	font-size:1.1rem;
	line-height:1.5;
	letter-spacing:0.05em;
	/*Androidブラウザフォントバグ対策*/
	max-height: 999999px;	
}
#input-form #btn {
	margin: 1em;
	text-align: center;
}
#input-form p#protection {
	margin:2% 0 5% 0;
	padding:0;
}
/* ▲キット申込フォーム▲ */

#description-text h3 {
  width: 85%;
  margin: 3% auto 1% auto;
  padding: 0;
  font-size: 1.4rem;
}
#description-text p {
  width: 85%;
  margin: 0 auto 0% auto;
  padding: 0;
  font-size: 1.4rem;
}
/* ▲メインコンテンツ▲ */

/* ▼フッター▼ */
footer {
  background-color: #8FC320;
  width: 100%;
  height: 180px;
}
footer p#footergold {
	width: 39.2%;
  min-width: 196px;
  margin: 0;
  padding: 0;
}
/* ▲フッター▲ */





/* 
------------------------------
------------------------------
▼320px～374px用の記述▼
------------------------------
------------------------------
*/
@media screen and (min-width: 320px) and (max-width: 374px){
  
  header p#header-topgold  {
    min-width: 178px;
  }
  header p#header-goldorder {
    min-width: 110px;
  }
  
}
/* 
------------------------------
------------------------------
▲320px～374px用の記述▲
------------------------------
------------------------------
*/










/* 
------------------------------
------------------------------
▼768px以上用（タブレット／PC用）の記述▼
------------------------------
------------------------------
*/
@media screen and (min-width : 768px ){
        
  
  body {
    font-size:16px;
    font-size:1.6em;/* 16px*/
    line-height:1.5;
}	
  
  /*リンク下線無し*/
  a {
    text-decoration:none;
  }
  /*リンク下線無し*/
  
  /*リンクhover時下線*/
  a:hover {
    text-decoration:underline !important;
  }
  /*リンクhover時下線*/
  
  
  
  /* ▼パンくず▼ */
  #pankuzu {
    font-size: 1.2rem;
  }
  /* ▲パンくず▲ */
  
  /* ▼メインコンテンツ▼ */
  h2 {
    padding: 3%;
    font-size: 2.0rem;
  }
  
  p#calculation {
    margin:10% 0 5% 0;
    font-size: 6.66rem;
  }
  
  p#update-date {
    width: 90%;
    font-size: 3.33rem;
  }
  #gold-price {
    display: flex;
    width: 85%;
  }
  .gold-price-box {
    width: 50%;
    margin: 0 auto 0 auto;
  }
  .gold-price-box h3 {
    width: 90%;

    font-size: 1.6rem;
  }
  .gold-price-box table {
    width: 90%;
  }
  .gold-price-box table th {
    font-size: 1.7rem;
  }
  .gold-price-box table td {
    font-size: 1.7rem;
  }

  p#description {
    font-size:1.6rem;
    text-align: center;
  }
  /* ▼キット申込フォーム▼ */
  #input-form {
    width: 85%;
    font-size: 1.6rem;
  }
  #input-form .form {
    margin: 0;
    padding: 3% 4% 2% 4%;
  }
  #input-form input[type=text] {
    font-size: 16px;
  }
  #input-form input[type=text].box01 {
    width: 20%;
  }
  #input-form input[type=text].box02 {
    width: 15%;
  }
  #input-form input[type=text].box03 {
    width: 50%;
  }
  #input-form input[type=submit] {
    font-size: 16px;/*スマホでボタンが見えないので削除 background: #FFF;*/
  }
  #input-form p#identification1 {
    margin:0 0 1% 0;
    padding:0;
    font-size:1.4rem;
    line-height:1.5;
    letter-spacing:0.05em;
  }
  .identification-back {
    font-size: 1.3rem;
  }
  #input-form p#identification2 {
    margin:1.5% 0 0 0;
    padding:0;
    font-size:1.4rem;
    line-height:1.5;
    letter-spacing:0.05em;
  }
  /* ドメイン受信設定のお願い */
  #input-form p#domain {
    margin:1% 0 0 0;
    padding:0;
    padding-left:1em;
    text-indent:-1em;
    font-size:1.4rem;
    line-height:1.5;
    letter-spacing:0;
  }
  #input-form span#domain_address {
    margin:0;
    padding:0;
    font-size:1.8rem;
    font-weight:bold;
    line-height:1.5;
    letter-spacing:0.05em;
    color:#06F;
  }
  /* ドメイン受信設定のお願い */
  #input-form p#minor {
    margin:0 2% 0 0;
    padding:0 0 2% 0;
    font-size:1.3rem;
    line-height:1.5;
    letter-spacing:0.05em;
  }
  #input-form #btn {
    margin: 1em;
    text-align: center;
  }
  #input-form p#protection {
    margin:2% 0 5% 0;
    padding:0;
  }
  /* ▲キット申込フォーム▲ */
  
  #description-text h3 {
    font-size: 2.0rem;
  }
  #description-text p {
    font-size: 2.0rem;
  }
  /* ▲メインコンテンツ▲ */
  
  /* ▼フッター▼ */
  footer {
    height: 250px;
  }
  
  /* ▲フッター▲ */ 
  
  
}
/* 
------------------------------
------------------------------
▲768px以上用（タブレット／PC用）の記述▲
------------------------------
------------------------------
*/