* {
  /* widthの合計にpaddingとborderが含まれる */
  box-sizing: border-box;
}

body {
  margin: 0;
  /* 書体 */
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

body_long {
  margin: 0;
  /* 書体 */
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  background-color: #F9F9F9;
}

br {
  display: block;
  content: "";
  margin: 46px 0;
}

a {
  text-decoration: none;
}

h3 {
  font-size: 17px;
  font-weight: bold;
  line-height: 14px;
}

h5 {
  font-size: 15px;
  font-weight: normal;
  line-height: 5px;
}

h6 {
  font-size: 10px;
  font-weight: normal;
  line-height: 5px;
}

.section p {
  font-size: 15px;
  font-weight: normal;
  line-height: 14px;
}

.section span {
  font-size: 17px;
  font-weight: bold;
  line-height: 16px;
}

.section_long p {
  font-size: 17px;
  font-weight: normal;
  line-height: 19px;
  padding: 0 0 0 0;
  margin: 0px 0 0px 0;
  color: #555;
}

.section_long span {
  font-size: 17px;
  font-weight: bold;
  line-height: 16px;
}

.section_long br {
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  margin: 13px 0 13px 0;
}

.container {
  width: 100%;
  padding: 0 12px;
  /* 中央に寄せる */
  margin: 0 auto;
}

.container_long {
  width: 100%;
  padding: 0 0px;
  /* 中央に寄せる */
  margin: 0 auto;
  background-color: #F9F9F9;
}

header {
  height: 65px;
  width: 100%;
  background-color: white;
  /* 背景色のみ透明
  background-color: rgba(34, 49, 52, 0.9); */
  max-width: 1000px; 
  /* 上部に固定 */
  position :fixed;
  top: 0;
}

header_long {
  height: 65px;
  width: 100%;
  background-color: #F9F9F9;
  max-width: 1000px; 
  /* 上部に固定 */
  /* position :fixed; */
  top: 0;
}

.header_iframe {
  height: 65px;
  width: 100%;
  background-color: white;
  /* 背景色のみ透明
  background-color: rgba(34, 49, 52, 0.9); */
  max-width: 1000px;
  top: 0;
}

.header-left {
  float:left;
  width: 500px;
}

.header-left_long {
  float:left;
  max-width: 420px;
  background-color: #F9F9F9;
}

.header-logo {
  float: left;
  margin-top: 22px;
  margin-bottom: 22px;
  margin-left: 5px;
  margin-right: 5px;
}

.header-logo_long {
  float: left;
  margin-top: 22px;
  margin-bottom: 22px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #F9F9F9;
}

.home {
  float: left;
  margin-left:8px;
}

.poka-icon {
  border-radius: 50%;
  width: 30px;
  margin-top: 20px;
  padding: 3px;
}

.poka-icon:hover {
  border: 3px solid #EEEEEE;
  padding: 0px;
  /* 変化にかかる時間 */
  transition:all 0.6s;
}

.apple-touch-poka-icon {
  background-color:white;
}

nav {
  padding: 180px 0 100px 0;
  /* 背景画像は図がある場合、1枚の画像で表示範囲を埋め尽くす */
  background-size: cover;
  color: white;
  text-align: left;
}

nav h1 {
  /* 文字を 透明 */
  opacity: 0.7;
  font-size: 45px;
  /* 文字の間隔を指定*/
  letter-spacing: 5px;
}

nav p {
  /* 透明 */
  opacity: 0.7;
}

article {
  padding-bottom: 50px;
  padding-left: 10px;
  padding-right: 5%;
  background-color: white;
  text-align: left;
  max-width: 1000px;
}



/* My contents. */
.heading {
  padding-top: 50px;
  padding-bottom: 15px;
  max-width: 1000px;
  font-size: 15px;
  /* 上部に固定
  position :fixed;
  top: 52px; */
}

/* My contents. */
.heading_long {
  padding-top: 50px;
  padding-bottom: 15px;
  max-width: 1000px;
  font-size: 15px;
  /* 上部に固定
  position :fixed;
  top: 52px; */
}

.heading h2 {
  font-weight: normal;
  font-size: 15px;
}

.heading-home {
  color: #5f5d60;
  padding-top: 50px;
  padding-bottom: 15px;
  max-width: 1000px;
}

.heading-home h2 {
  font-weight: normal;
}

.section-title{
  max-width: 700px;
  border-bottom:2px solid #dee7ec;
  padding-bottom:7px;
  margin-bottom:20px;
}

.section-title_long{
  max-width: 700px;
  border-bottom:2px solid #dee7ec;
  padding-bottom:7px;
  margin-bottom:20px;
  color: #555;
}

.section-icon {
  max-width: 700px;
}

.section-icon p {
  font-size: 10px;
  line-height: 5px;
}

.section-icon:hover {
  /* デフォルト16px */
  font-size: 18px;
  /* 変化にかかる時間 */
  transition:all 0.2s;
}

.section-icon a {
  max-width: 450px;
  height: 80px;
  padding: 39px 0.5em;
  background: aliceblue;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
  /* 範囲をボックス全体に広げる */
  display:block;
  /* 文字を 透明 */
  opacity: 1.0;
  color:black;
  line-height: 5px;
}

.section-icon a:hover {
  /* 背景色のみ透明 */
  background-color: rgba(255, 255, 255, 0.3);
  /* デフォルト16px */
  font-size: 18px;
  /* 文字を 透明 */
  opacity: 1.0;
  /* 変化にかかる時間 */
  transition:all 0.2s;
  /* カーソル */
  cursor:pointer;
}

.section-icon a:active{
  max-width: 450px;
  height: 80px;
  padding: 39px 0.5em;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1.5px solid rgb(0, 247, 255);
  /* 背景色のみ透明 */
  box-shadow: 0 0 4px rgba(4, 41, 250, 0.23);
  /* 範囲をボックス全体に広げる */
  display:block;
  /* 文字を 透明 */
  opacity: 1.0;
  /* 変化にかかる時間 */
  transition:all 0.4s;
}

.section-icon_3line {
  max-width: 700px;
}

.section-icon_3line:hover {
  /* デフォルト16px */
  font-size: 18px;
  /* 変化にかかる時間 */
  transition:all 0.2s;
}

.section-icon_3line a {
  max-width: 450px;
  height: 80px;
  padding: 25px 0.5em;
  background: aliceblue;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
  /* 範囲をボックス全体に広げる */
  display:block;
  /* 文字を 透明 */
  opacity: 1.0;
  color:black;
  line-height: 5px;
}

.section-icon_3line p {
  font-size: 10px;
  line-height: 5px;
}

.section-icon_3line a:hover {
  /* 背景色のみ透明 */
  background-color: rgba(255, 255, 255, 0.3);
  /* デフォルト16px */
  font-size: 18px;
  /* 文字を 透明 */
  opacity: 1.0;
  /* 変化にかかる時間 */
  transition:all 0.2s;
  /* カーソル */
  cursor:pointer;
}

.section-icon_3line a:active{
  max-width: 450px;
  height: 80px;
  padding: 39px 0.5em;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1.5px solid rgb(0, 247, 255);
  /* 背景色のみ透明 */
  box-shadow: 0 0 4px rgba(4, 41, 250, 0.23);
  /* 範囲をボックス全体に広げる */
  display:block;
  /* 文字を 透明 */
  opacity: 1.0;
  /* 変化にかかる時間 */
  transition:all 0.4s;
}



.section-icon_long {
  max-width: 540px;
}

.section-icon_long:hover {
  /* デフォルト16px */
  font-size: 18px;
  /* 変化にかかる時間 */
  transition:all 0.2s;
}

.section-icon_long a {
  max-width: 600px;
  height: 80px;
  padding: 25px 0.5em;
  background: aliceblue;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
  /* 範囲をボックス全体に広げる */
  display:block;
  /* 文字を 透明 */
  opacity: 1.0;
  color:black;
}

.section-icon_long p {
  font-size: 10px;
  line-height: 5px;
}

.section-icon_long a:hover {
  /* 背景色のみ透明 */
  background-color: rgba(255, 255, 255, 0.3);
  /* デフォルト16px */
  font-size: 18px;
  /* 文字を 透明 */
  opacity: 1.0;
  /* 変化にかかる時間 */
  transition:all 0.2s;
  /* カーソル */
  cursor:pointer;
}

.section-icon_long a:active{
  max-width: 600px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 2.1px solid rgb(68, 0, 255);
  /* 背景色のみ透明 */
  box-shadow: 0 0 4px rgba(5, 43, 253, 0.23);
  /* 範囲をボックス全体に広げる */
  display:block;
  /* 文字を 透明 */
  opacity: 1.0;
}

/* 
aside {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: left;
}

.heading h3 {
  background-color: yellow;
  font-weight: normal;
}
*/

footer p {
  color: #b3aeb5;
  font-size: 12px;
}

footer {
  padding-top: 30px;
  padding-bottom: 20px;
  max-width: 1000px;
}

footer_long {
  padding-top: 30px;
  padding-bottom: 20px;
  max-width: 1000px;
  background-color: #F9F9F9;
}

.next{
  width: 28px;
}

.back{
  width: 28px;
}

.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* ボックスに入らない部分はスクロール */
  overflow:auto; 
  /* touchじゃなくてautoだと、指を離すとスクロールが止まる */
  -webkit-overflow-scrolling:touch;
  border:2px solid #ccc;
  width: 830px;
}
 
.iframe-wrap iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:none;
  display:block;
}

.small-iframe{
  margin-top: -25%;
  margin-bottom: -30%;
  margin-left: -29%;
  transform: scale(0.35);
}