/* Global */


* {
   box-sizing: border-box;
}

body {
font-family: 'Quicksand', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS PGothic', sans-serif;
font-weight: 400;
font-size: 1em;
color: #363636;

}
img {
	max-width: 100%;
}
a:link {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: none;
}
a:visited {
	color: #fff;
	text-decoration: none;
}





/* font */

.blue {
	color: #222222;
	font-weight:bold;
}
.toosmall{
	font-size: 0.6em !important;
}
.small{
	font-size: 0.8em !important;
}
.normal{
	font-size: 1.8em !important;
}
.big{
	font-size: 2em !important;
}
.txright{
	text-align:right;
}
.txleft{
	text-align:left;
}
.txcenter{
	text-align:center;
}


header {
	padding: 20px 30px;
	top: 0;
	width: 100%;
	background-color: #fff;
	align-items: left;
	justify-content: space-between;
	transition: 2s;
}

header h1 {
  margin-top: 10px; /* 上部の余白を追加または調整 */
  margin-bottom: 10px; /* 下部の余白を追加または調整 */
}

header p {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 0.8em; /* フォントサイズを小さくする */
}











/* General Slides */ 

.slide{
	background-attachment: fixed;
	width: 100%;
	height: auto;
	position: relative;
	padding:120px 0;
}





/* Slide */

#slide1{
	background-image: url('../images/nyc.jpg');
	background-color: rgba(0, 0, 0, 0.2);
	background-size: cover;
	background-position: center;
	padding: 30px 0;
	opacity: 0.8;
}

#slide1 h1 {
	font-size: 1em;
	letter-spacing: -2px;
	padding: 5px 20px;
	color:#333333;
	font-weight: 700;
}

#slide1 h2 {
	font-size: 1em;
        letter-spacing: -2px;
	color: #000000;
	padding: 10px 20px;
	font-weight: 450;
	padding: 20px;
}

#slide1 h3 {
	font-size: 1.5em;
	letter-spacing: -2px;
	padding: 0 20px;
	color:#333333;
	font-weight: 700;
	text-shadow    : 
       2px  2px 1px #fff,
      -2px  2px 1px #fff,
       2px -2px 1px #fff,
      -2px -2px 1px #fff,
       2px  0px 1px #fff,
       0px  2px 1px #fff,
      -2px  0px 1px #fff,
       0px -2px 1px #fff;  
}

#slide1 h4 {
	padding: 0 0px;
	font-size: 2em;
	text-align: center;
	color: #000;
	font-weight: 450;

}

#slide1 h5 {
	padding: 0 10px;
	font-size: 1.5em;
	text-align: center;
	color: #000;
	font-weight: 450;

}

#slide1 p {
	color: #000000;
	text-align: left;
	line-height: 1em;
}


select {
   	-webkit-appearance: none;
	height; 30px:
	margin-right: auto;
	margin-left: auto;
	font-size: 40px; /* フォントサイズを指定 */
  	color: #333; /* テキストの色を指定 */
  	background-color: #fff; /* 背景色を指定 */
	border-color: #333;
  	border: 1px solid;
  	border-radius: 3px;
	padding-left: 5px; /* 左にスペースを加える */
}

select:hover {
  background-color: #e0e0e0; /* ホバー時の背景色を指定 */
}





.flexbox {
	display: flex;
	position: auto;
}

.flexbox5 {
	display: fixed;
	position: auto;
}

.flexbox2 {
	margin: 20px 20px;
	padding: 50px 50px; 
	background-color: rgba(255, 255, 255, 0.85); /* 透明度を指定 */
	display: fixed;
	width: 100%;
}





#myChart {
  display: block;
  margin: auto;
}



.flexbox3 {
  margin: 20px; /* 上下左右のマージンを均等に設定 */
  padding: 20px; /* 上下左右のパディングを均等に設定 */
  background-color: rgba(204, 255, 227, 0.8);
  display: block;
  flex-direction: row;
  justify-content: center; /* 要素を水平方向に中央揃え */
  width: calc(100% - 40px); /* ボックスの幅にマージンを考慮 */
  max-width: calc(100% - 40px); /* ボックスの最大幅にマージンを考慮 */
  box-sizing: border-box; /* ボックスの幅とパディングを合計したサイズにする */
}


.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 要素を水平方向に中央揃え */
    justify-content: center; /* 要素を垂直方向に中央揃え */
}

.flex-item {
	margin-bottom: 5px;
	text-align: center; /* 要素内のテキストを中央揃え */
	align-items: center; /* 要素を水平方向に中央揃え */
}

.flex-item h4 {
	margin: 0 0 15px 0; /* h4 要素のマージンをリセット */
	padding: 0; /* h4 要素のパディングをリセット */
}


.name-input {
  width: 200px;
  font-size: 1em;
  /* その他のスタイルを追加 */
}

.year-input {
  width: 100px;
  font-size: 1em;
  /* その他のスタイルを追加 */
}

.month-input {
  width: 75px;
  font-size: 1em;
  /* その他のスタイルを追加 */
}

.day-input {
  width: 75px;
  font-size: 1em;
  /* その他のスタイルを追加 */
}

.age-input {
  width: 50px;
  font-size: 1em;
  /* その他のスタイルを追加 */
}



#gauge {
  /* ゲージのサイズに応じて適切な幅と高さを指定してください */
  width: 400px;
  height: 280px;
  margin: 0 auto; /* ゲージを水平中央に配置 */
}


#resultForm4 {
    margin-bottom: 20px; /* input要素に追加のマージンを設定 */
    /* 他のスタイル設定 */
}

h4 {
    margin-bottom: 10px; /* <h4>要素の下部マージンを調整 */
    /* 他のスタイル設定 */
}

.perio-info {
    display: flex;
    justify-content: space-between;
}



.input[type="radio"] {
        display: inline;
	}

.chart-input {
        width: 70px; /* 任意の幅を設定 */
	font-size: 1em;
	}

.chart-input3 {
        width: 50px; /* 任意の幅を設定 */
	font-size: 1em;
	}

.chart-input4 {
        width: 50px; /* 任意の幅を設定 */
	font-size: 1em;
	}

#inputBone\/Age {
        width: 70px; /* 任意の幅を設定 */
	font-size: 1em;
	}

#outputBone\/Age {
        width: 50px; /* 任意の幅を設定 */
	font-size: 16px;
	}

#selectedResult {
        width: 100px; /* 任意の幅を設定 */
	font-size: 16px;
	}

#perioResult {
        width: 100px; /* 任意の幅を設定 */
	font-size: 16px;
	}

#stageResult {
        width: 40px; /* 任意の幅を設定 */
	font-size: 16px;
	}

#gradeResult {
        width: 40px; /* 任意の幅を設定 */
	font-size: 16px;
	}

#resultForm4 {
        width: 100px; /* 任意の幅を設定 */
	font-size: 20px;
	}

#Interval {
        width: 100px; /* 任意の幅を設定 */
	font-size: 20px;
	}

/* ロゴの初期スタイル */
.logo_fadein {
      background: rgba(204, 255, 227);
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 999;
    }
    .logo_fadein h1 {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: none;
      z-index: 9999;
      /* width: 280px; の部分を削除 */
    }

.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-column {
    flex: 1;
	padding: 50px;
}
/* 画像のスタイル */
.left-column img {
    width: 400px; /* 画像の幅を適切なサイズに指定 */
    height: auto; /* 高さは自動調整されるように設定 */
}

.right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.top-section {
    text-align: right; /* 右づけ */
}

.bottom-section {
    text-align: right; /* 右づけ */
}

















/* Tablet */
@media screen and (max-width: 1024px) {
.slide{
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% auto;
	width:100%;
	position: relative;
	padding: 200px 0 50px 0;
}

#slide1{
	background-size: auto 120%;
	padding: 50px 0 50px 0 !important;
}
#slide1 h1 {
	line-height: 1em;
	letter-spacing: -1;
	font-size: 1em !important;
	display: fixed;
}
#slide1 h2 {
	line-height: 1em;
	font-size: 1em !important;
	display: fixed;
}
#slide1 h3 {
	line-height: 1em;
	letter-spacing: -1;
	text-align: center;
	font-size: 1em !important;
}
#slide1 h4 {
	line-height: 1em;
	letter-spacing: -1;
	text-align: center;
	font-size: 1.5em !important;
}
#slide1 p {
	line-height: 1em;
	letter-spacing: -1;
	text-align: center;
	font-size: 1em !important;
}



select {
	font-size: 25px; /* フォントサイズを指定 */
  	color: #222; /* テキストの色を指定 */
  	background-color: #fff; /* 背景色を指定 */
	border-color: #333;
}

.flexbox{
	display: fixed;
	flex-direction: column;

}

.flexbox p {
	padding: 0 5px;
	color: #000000;
	display: fixed;
	line-height: 1em;
	letter-spacing: -1;
	text-align: center;
	font-size: 1em !important;
}

.flexbox2 {
    padding: 50px 50px; /* 適切な余白を指定してください */
    box-sizing: border-box; /* 要素の幅にパディングを含めるために必要です */
    display: inline-block; /* インラインブロック要素として表示 */
    width: calc(100% - 30px); /* パディングを含んだ要素の幅 */
    white-space: nowrap; /* 要素が折り返されないようにします */
  }

.flexbox3 {
    padding: 15 5px; /* 適切な余白を指定してください */
    box-sizing: border-box; /* 要素の幅にパディングを含めるために必要です */
    display: inline-block; /* インラインブロック要素として表示 */
    width: calc(100% - 30px); /* パディングを含んだ要素の幅 */
    white-space: nowrap; /* 要素が折り返されないようにします */
  }


.flexbox2 form {
    	display: flex;
        flex-direction: column;
        align-items: flex-start;
  }

.flexbox2 form p {
    	flex: 0 0 auto;
    	margin: 5px;
        font-size: 2em !important;
  }

.flexbox3 div {
        flex-direction: column;
    }

.flexbox3 h4{
	padding: 0 10px;
	color: #000000;
	display: fixed;
	line-height: 2em;
	letter-spacing: -1;
	font-size: 1em !important;
}
.flexbox3 p{
	padding: 0 10px;
	color: #000000;
	display: fixed;
	line-height: 2em;
	letter-spacing: -1;
	font-size: 0.5em !important;
}

.perio-info {
    display: flex;
    justify-content: space-between;
}



.chart-input {
        width: 50px; /* 任意の幅を設定 */
	font-size: 10px;
	}

.chart-input3 {
        width: 50px; /* 任意の幅を設定 */
	font-size: 10px;
	}

.chart-input4 {
        width: 50px; /* 任意の幅を設定 */
	font-size: 10px;
	}

#inputBone\/Age {
        width: 50px; /* 任意の幅を設定 */
	font-size: 10px;
	}

#outputBone\/Age {
        width: 50px; /* 任意の幅を設定 */
	font-size: 10px;
	}

#selectedResult {
        width: 100px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#perioResult {
        width: 100px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#stageResult {
        width: 50px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#gradeResult {
        width: 50px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#resultForm4 {
        width: 100px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#Interval {
        width: 100px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#gauge {
  /* ゲージのサイズに応じて適切な幅と高さを指定してください */
  width: 200px;
  height: 160px;
}

.name-input {
  width: 200px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}

.year-input {
  width: 100px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}

.month-input {
  width: 50px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}

.day-input {
  width: 50px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}

.age-input {
  width: 50px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}

.foot {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .left-column, .right-column {
        width: 100%;
        text-align: center;
    }

/* 画像のスタイル */
.left-column img {
    width: 300px; /* 画像の幅を適切なサイズに指定 */
    height: auto; /* 高さは自動調整されるように設定 */
}

}














/* Mobile */
@media screen and (max-width: 750px) {

.slide{
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% auto;
	width:100%;
	position: relative;
	padding: 200px 0 50px 0;
}

#slide1{
	background-size: auto;
	padding: 50px 0 50px 0 !important;

}
#slide1 h1 {
	line-height: 1em;
	letter-spacing: -1;
	font-size: 1em !important;
	display: fixed;
}
#slide1 h2 {
	line-height: 1em;
	font-size: 1em !important;
	display: fixed;
}
#slide1 h3 {
	line-height: 1em;
	letter-spacing: -1;
	text-align: center;
	font-size: 1em !important;
}
#slide1 h4 {
	line-height: 1em;
	letter-spacing: -1;
	text-align: center;
	font-size: 1em !important;
}
#slide1 p {
	line-height: 1em;
	letter-spacing: -1;
	text-align: center;
	font-size: 0.7em !important;
}


select {
	font-size: 25px; /* フォントサイズを指定 */
  	color: #222; /* テキストの色を指定 */
  	background-color: #fff; /* 背景色を指定 */
	border-color: f333;
}


.flexbox{
	display: fixed;
	flex-direction: column;

}

.flexbox p {
	padding: 0 5px;
	color: #000000;
	display: fixed;
	line-height: 1em;
	letter-spacing: -1;
	text-align: center;
	font-size: 3em !important;
}

.flexbox2 {
    padding: 15px 10px; /* 適切な余白を指定してください */
    box-sizing: border-box; /* 要素の幅にパディングを含めるために必要です */
    
    width: calc(100% - 30px); /* パディングを含んだ要素の幅 */
    white-space: nowrap; /* 要素が折り返されないようにします */
  }

.flexbox3 {
    padding: 15 5px; /* 適切な余白を指定してください */
    box-sizing: border-box; /* 要素の幅にパディングを含めるために必要です */
    
    width: calc(100% - 30px); /* パディングを含んだ要素の幅 */
    white-space: wrap; /* 要素が折り返されないようにします */
  }


  .flexbox2 form {
    display: flex;
        flex-direction: column;
        align-items: flex-start;
  }

  .flexbox2 form p {
    flex: 0 0 auto;
    margin: 5px;
  }

.flexbox3 div {
        flex-direction: column;
    }

.flexbox3 h4{
	padding: 0 10px;
	color: #000000;
	display: fixed;
	line-height: 2em;
	letter-spacing: -1;
	font-size: 1em !important;
}
.flexbox3 p{
	padding: 0 10px;
	color: #000000;
	display: fixed;
	line-height: 2em;
	letter-spacing: -1;
	font-size: 0.5em !important;
}

.perio-info {
        flex-direction: column;
        align-items: flex-start;
    }

.perio-info label {
        margin-bottom: 10px;
    }

.chart-input {
        width: 60px; /* 任意の幅を設定 */
	font-size: 16px;
	}

.chart-input3 {
        width: 50px; /* 任意の幅を設定 */
	font-size: 12px;
	}

.chart-input4 {
        width: 50px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#inputBone\/Age {
        width: 60px; /* 任意の幅を設定 */
	font-size: 16px;
	}

#outputBone\/Age {
        width: 50px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#selectedResult {
        width: 100px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#perioResult {
        width: 100px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#stageResult {
        width: 50px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#gradeResult {
        width: 50px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#resultForm4 {
        width: 100px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#Interval {
        width: 100px; /* 任意の幅を設定 */
	font-size: 12px;
	}

#gauge {
  /* ゲージのサイズに応じて適切な幅と高さを指定してください */
  width: 200px;
  height: 160px;
}

.name-input {
  width: 200px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}

.year-input {
  width: 100px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}

.month-input {
  width: 60px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}

.day-input {
  width: 60px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}

.age-input {
  width: 50px;
  font-size: 16px;
  /* その他のスタイルを追加 */
}


.foot {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .left-column, .right-column {
        width: 100%;
        text-align: center;
    }

.top-section {
    text-align: center;
}

.bottom-section {
    text-align: center;
}

/* 画像のスタイル */
.left-column img {
    width: 300px; /* 画像の幅を適切なサイズに指定 */
    height: auto; /* 高さは自動調整されるように設定 */
}






}