@charset "UTF-8";

html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: #2b2b2b;
  font-family: "M PLUS 1p" ,Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: 2;
  letter-spacing: 0.09rem;
  font-size: 1.6rem;
  width: 1050px;
}

p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,

img {
  width: 100%;
  height: auto;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
  padding: 0;
}

input {
  cursor: pointer;
}

.inner {
  width: 98%;
  margin: auto;
}

/*_________header*/
#page-header1 {
  box-sizing: border-box; 
  height: 0px;
  width: 100%;
position: fixed;  
/* position: relative; */
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  /* 黒 */
  margin: 0;
  /* padding: 0.01em 0.01em; */
  color: #fcfcfc;
  background: rgb(255, 255, 255);
  /*背景色*/
  border-top: solid 1px #dcdcdc;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.32);
  /*影*/
}

.A-inner {
  width: 100%;
  height: 80px;
  background: #f1f1f1; 
  display: flex;
  position: absolute;
  text-align: center;
  justify-content: flex-end;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
  /* スカイブルー */
}

#page-header1 .coment {
  width: 80vw;
  font-size: 18px;
  position: relative;
  top : -10px;
  left : 0px;
/* background :#fff; */
  /* 研究室部分 */
}
#page-header1 .A-inner a{
  color: #171717;
  text-decoration: none;
}
#page-header1 .coment img{
  width: 70px;
  height: 70px;
  position: relative;
  left :-15px;
  top : 25px;
  /* ハートマーク */
  /* background: #dcdcdc; */
}
#koko{
  font-size: 14px;
}
.kokoro h3{
  position: relative;
  top : 20px;
  right: 10%; 
  /* background: #0d0c0e; */
}
.saito h3{
  position: relative;
  right: 10%; 
  /* background: #b98be7;  */
}


 /* この中に本文コンテンツtext00______________  */
#text00{
  width: 99vw;
  height: 13500px;
/* background-color: #85f703;  */
  position: relative;
  top :30px;
  color: #5a5a5a;
  /* 全体コンテンツの長さ menuからfooter上まで*/
}

/* メニュー ＿＿＿＿＿＿＿*/
#container0{
  height: 1100px;
  width: 95vw;
/* background: #f6e8c7;  */
  position: relative;
  top :100px;
  left :2%;
  /* 新規、過去目次の大きさ */
}
#container0 a{
  color: #0d0c0e;
  text-decoration: none;
}

/* 題名目次 */
#pura00{
  width: 90vw;
  height: 800px;
  /* background: #d2ecf1;      */
  font-size: 16px;
  padding: 15px;
    border:  solid 0.01px #aeaeae;  
    position: relative;
    top :30px;
    left : 0%;
  /* 目次とA8の場所 */
  display: flex;
  justify-content: space-around;
  }
  .details {
    transition: .3s;
    /* 0.3秒で開く */
    overflow: hidden;
    margin-top: -10px;
    padding-bottom: 20px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  .details1[open] {
    margin-top: 0;
    padding-bottom: 10px;
  } 
  .details-vol1 {
    width: 50vw;
    /* 海幸目次幅 */
    display: block;
    padding: 15px;
    transition: .3s;
    transform: translateY(10px);
    /* background-color: rgba(19, 27, 241, 0.32); */
    background: linear-gradient(to bottom,#c49c52,#eb643f);
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    &:hover {
      cursor: pointer;
    }
  }
  .details-vol1::-webkit-details-marker {
    display: none;
  }
  .details[open] .details-vol1 {
    transform: translateY(0);
  }
  .details-menu {
    width: 49vw;
    /* 海幸目次項目幅 */
    padding: 20px;
    background-color: #ffdba9af;
    border-bottom: 2px solid #f28736;
    border-left: 2px solid #dd3c0f;
    border-right: 2px solid #dd3c0f;
    /* アコーディオン中身の色 */
    font-size: 18px;
    text-align: left;
  }





/* コンテンツ新規「神話から歴史へ」＿＿＿＿＿＿＿ */
#contentsuTop{
  height: 12600px;
/* background: #dcf9c1;   */
  position: relative;
  top :0px;
  width: 98vw;
  /* footer上 */
}
#contentsuTop h3{
font-size: 24px;
}
#contentsuTop h4{
  font-size: 19px;
}
#contentsuTop p{
  font-size: 12px;
}
#moku{
  height: 500px;
  /* background: #fce6e6; */
}


#top1{
  /* ＜なぜ東征したのか？＞ */
height: 2400px;
position: relative;
top : 50px;
/* background: #fad0c4;   */
}
.tousei{
  display: flex;
  width: 60vw;
  position: relative;
  left : 15%;
}
.tousei img{
  width: 80px;
  height: 80px;
}
.top1-text1{
  width: 73vw;
  position: relative;
  left : 10%;
  height: 150px;
}
.top1-text2{
  width: 73vw;
  position: relative;
  left : 10%;
  height: 150px;
}
.top1-text3{
  width: 73vw;
  position: relative;
  left : 10%;
  height: 180px;
}
.top1-text4{
  width: 73vw;
  position: relative;
  left : 10%;
  height: 300px;
  /* background: #d5d4d4; */
}
.photo-top1 img{
  width: 960px;
  height: 480px;
}
.photo-top1{
  height: 600px;
}
.top1-text5{
  width: 73vw;
  position: relative;
  left : 10%;
  height: 350px;
  /* background: #ebebeb;  */
}
.top1-text6{
  width: 73vw;
  position: relative;
  left : 10%;
  height: 200px;
  /* background: #f7d9d9;  */
}



#top2{
  /* ＜東征物語に登場するナガスネヒコとニギハヤキとはどんな人？＞  */
  height: 900px;
  /* background: #eef1e1; */
}
.top2-text2{
  display: flex;
  justify-content: space-around;
}
.photo-top2{
  width: 48vw;
}
.photo-top2 img{
  width: 350px;
  height: 400px;
}

.text-top2{
  width: 48vw;
  text-align: left;
}
.text-top2 h4{
  width: 45vw;
  position: relative;
  left : 1%;
}

/* 『長髄彦（ながすねひこ）とは』*/
#top3{
  height: 1500px;
  /* background: #f6e7e7; */
}
#top3 h4{
  width: 90vw;
  position: relative;
  left : 2%;
}
.top3-a{
  width: 48vw;
}
.top3-a img{
  width: 350px;
  height: 500px;
}
.top3-b{
  width: 48vw;
}
.top3-b img{
  width: 400px;
  height: 600px;
}
.photo-top3{
  display: flex;
  justify-content: space-around;
  height: 800px;
}
.tomio{
  width: 85vw;
  height: 400px;
  position: relative;
  left: 2%;
}

/* 『饒速日命（にぎはやひのみこと）とは』 */
#top4{
  height: 3000px;
/* background: #8ddaeb;  */
}

.nigi{
  height: 250px;
  /* background: #deedf1; */
}
.kourin{
  height: 700px;
  /* background: #f6f7ec; */
}
.hayahi{
  height: 600px;
  background-image: url(./images/hayahi.webp)
  /* background-color: #e6d6ff; */
}
.hayahi h4{
  width: 80vw;
  position: relative;
  left : 10%;
  color: #efefef;
}
.hayahi p{
  color: #efefef;
}
.bk4{
  background-color: rgba(0, 0, 0, 0.32);
  width: 100%;
  height: 600px;
}
.top4-text1{
  height: 300px;
}
.top4-text2{
  height: 130px;
  /* background: #c8ddf4; */
}
.top4-text3{
  text-align: left;
}
#top4 .top4-text3 h4{
  font-size: 16px;
}

/* 一の矢 */
.rin1{
  height: 450px;
  display: flex;
  justify-content: space-around;
  /* background: #fde2cd; */
}
.ya1-a{
  width: 47vw;
}
.ya1-a h4{
  width: 45vw;
  text-align: left;
  position: relative;
  left : 1%;
}
.ya1-b{
  width: 47vw;
}
.ya1-b img{
  width: 400px;
  height: 350px;
  position: relative;
  top : 50px;
}

/* 二の矢 */
.rin2{
  height: 450px;
  display: flex;
  justify-content: space-around;
  /* background: #fde2cd; */
}
.ya2-a{
  width: 47vw;
}
.ya2-a h4{
  width: 45vw;
  text-align: left;
  position: relative;
  left : 1%;
}
.ya2-b{
  width: 47vw;
}
.ya2-b img{
  width: 400px;
  height: 350px;
  position: relative;
  top : 50px;
}
/* 3の矢 */
.rin3{
  height: 500px;
  display: flex;
  justify-content: space-around;
  /* background: #fde2cd; */
}
.ya3-a{
  width: 47vw;
}
.ya3-a h4{
  width: 45vw;
  text-align: left;
  position: relative;
  left : 1%;
}
.ya3-b{
  width: 47vw;
}
.ya3-b img{
  width: 400px;
  height: 350px;
  position: relative;
  top : 50px;
}
.hime{
  height: 600px;
  /* background: #5f5f5f; */
}
.mika{
  height: 420px;
  background-image: url(./images/ichiya.webp);
  /* background: #c49c52; */
}
.mika h4{
  width: 80vw;
  position: relative;
  left :7%;
  top : 80px;
  color: #dcdcdc;
}
#top4 .bk5{
  width: 100%;
  height: 420px;
  background-color: rgba(0, 0, 0, 0.32);
}



#top5{
  /* ＜東征は大和王朝確立にはなぜ必要なものだったのでしょうか？＞*/
  height: 2800px;
  /* background: #f6eff9;   */
  width: 98vw;
}
.photo-top5 img{
  width: 80px;
  height: 80px;
}
.text-top5b{
  height: 150px;
}
.text-top5c{
  height: 300px;
}
#top5 h4{
  width: 85vw;
  position: relative;
  left : 5%;
}
#top5 h5{
  width: 80vw;
  position: relative;
  left : 7%;
  font-size: 15px;
}
.box1{
  width: 48vw;
}
.box2{
  width: 48vw;
}
.ten{
  display: flex;
}
.miwa{
  display: flex;
}
.okite{
  display: flex;
  height: 380px;
  /* background: #dcdcdc; */
}
.okite img{
  width: 250px;
  height: 300px;
}
#top5 .okite h5{
  width: 20vw;
  text-align: left;
}
.keiyaku{
  height: 300px;
}
.jin{
  height: 350px;
  /* background: #c7e0fa; */
}
#top5 .jin h5{
  font-size: 16px;
}
.shiki{
  display: flex;
  height: 700px;
  /* background: #e6d6ff; */
}
#top5 .text-mono{
  width: 48vw;
}
#top5 .shiki h5{
  width: 35vw;
  text-align: left;
  font-size: 16px;
}
#top5 .photo-shiki{
  width: 48vw;

}
.photo-shiki img{
  width: 500px;
  height: 560px;
  position: relative;
  top : 0px;
}
.text-mono img{
  width: 400px;
  height: 200px;
}


/* 神武天皇のような崇神天皇 */
#top6{
  height: 850px;
  /* background: #c7e0fa; */
  width: 90vw;
  position: relative;
  left :4%;
}
.hatu{
  display: flex;
  justify-content: space-around;
  text-align: left;
  height: 350px;
}
.hatu h5{
  font-size: 15px;
}
.sujin{
  width: 45vw;
  
}
.kaikaku {
  width: 40vw;
}
#top6 h4{
  width: 82vw;
position: relative;
left : 5%;
}

#butn{
height: 200px;
/* background: #dff4f5; */
}


































/* ______________footer___________________________ */
footer{
  display: flex;
  width: 120vw;
  height: 350px;
  font-size: 15px;
  /* background: #dcdcdc;  */
  position: relative;
  top: 0px;
  text-align: center;
  border-top: solid 3px #dcdcdc;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}
footer a{
  color: #313131;
  text-decoration: none;
  font-size: 15px;
letter-spacing: 0.2rem;
}
/* 左会社説明 */
#com-footer{
  width: 40%;
  /* background: #fcf0f0;   */
  padding-top: 10px;
  font-size: 15px;
}
.comA{
  height: 60px;
  /* background: #e9fdff; */
  padding-top: 10px;

}
.comB{
  height: 70px;
  /* background: #ea7373; */
  position: relative;
  top :-10px;
}
.comD{
  height: 70px;
  /* background: #fcd8d8; */
  position: relative;
  top: -30px;
}
.comC{
  height: 50px;
  position: relative;
  top :-20px;
}
/* 右お問い合わせ */
#bun-footer{
  width: 40%;
  /* background: #dcdcdc;   */
}


#bun-footer .bun-nav a{
  font-size: 15px;
}
#bun-footer .bun-nav{
  position: relative;
  top :20px;
}
.bun-inner {
  width: 100%;
  height: 100px;
  /* background: #ea7373;   */
  position: relative;
  top: 70px;
}

.bun-blk {
  width: 100%;
  height: 150px;
  /* background: #dbfcfc;   */
  position: relative;
  top: 20px; 
  padding: 10px;
  font-size: 15px;
  letter-spacing: 0.09rem;
  padding-top: 10px;

}

.bun-nav img {
  width: 30px;
  height: 30px;
  /* background: #7fffff; */
  padding-top: 20px;

}
.bun-nav p{
  color: #656565;

}





/* スマホ____________________ */
@media only screen and (max-width: 414px) {
  img {
    max-width: 98%;
  }

  img {
    max-width: 99%;
    width
    /***/
    : auto;
    /*IE8用ハック*/
    height:auto;
    margin-left:auto;
    margin-right:auto;
  }

  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  .inner {
    width: 414px;
    margin: 0 auto;
    padding: 0;
    max-width:100%;
    clear:both;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:8px;
  }
body{
  width: 100%;
  box-sizing: border-box;
}
  /* ヘッダースマホ___________ */
  #page-header1 {
    position: fixed;
      top : 0px;
    left : 0px; 
    width: 400px;
  height: 80px;
  } 

  #page-header1 .coment {
    font-size: 14px;
    position: relative;
    left : 0px;
    top:0px;
    width: 90vw;
    /* 研究室のところ */
  }
  #page-header1 .coment img{
    width: 45px;
    height: 45px;
    position: relative;
    left :-40px;
    top :10px;
    /* 心マーク大きさ位置 */
  }
  .A-inner{
    position: relative;
    left :1%;
  }
#koko{
  font-size: 0.7rem;
  position: relative;
  top : -10px;
  left : 0;
  width: 30vw;
}
.kokoro h3{
  position: relative;
  top : 5px;
}
.saito h3{
  position: relative;
  top : -5px;
  left : -5%;
}
.coment li{
  position: relative;
  top : -3px;
}





#wrapperTOTAL{
  overflow: hidden;
}


/* バナー ＿＿＿＿＿＿＿＿＿＿*/






/* ＿＿＿＿＿＿＿＿この中に本文コンテンツ________ */
#text00{
  width: 98%;
  height: 23800px;
  /* background: #85e5d8; */
  font-size: 1.6rem; 
  position: relative;
  left : 0;
  top : 0px;
  margin: auto;
  /* メニュー上からfooter上まで */
}

/* メニュー _______*/
#container0{
height: 1000px;
width: 93vw;
/* background: #f8e2e2;  */
position: relative;
left :0;
top :60px;
font-size: 16px;
margin: auto;
/* 新規、過去目次の大きさ */
}
#container0 h2{
  width: 58vw;
  position: relative;
  left : 20%;
  top :20px;
}
/* 目次 */
#pura00{
  width: 99vw;
  height: 1600px;
  /* background: #d2ecf1;     */
  border:  none;    
  padding: 0px;
  display: block;
  /* アコーディオン目次 */
  }
  .details-vol1 {
    width: 85vw;
    /*目次幅 グラデーション部分*/
  }
  .details-vol1 h4{
    width: 85vw;
  }
  .details-menu {
    width: 78vw;
    /* 目次項目幅 */
  }



  


   /* コンテンツ新規ここから */
  #contentsuTop{
    height: 23800px;
    /* background: #baea8e; */
      position: relative;
      left :0;
      top :0px;
      width: 98vw;
      /* 目次下のコンテンツからfooter上 */
    }
    #contentsuTop h3{
    width: 85vw;
    position: relative;
    left: 4%;
      }
      
      #contentsuTop h4{
        width: 95vw;
        position: relative;
        left: -2%;
        text-align: center; 
        height: 400px;
          }
  #contentsuTop h3{
    font-size: 21px;
  }
  #moku {
    height: 700px;
  }
  
  /*＜＜なぜ東征したのか？＞＞ */
  #top1{
    height: 3500px;
  /* background: #f5cec3; */
  }
  #top1 .tousei img{
position: relative;
right: 0;
top :30px;
  }
  #top1 h3{
    width: 98vw;
    /* background: #dcdcdc; */
    font-size: 21px;
  }

  #top1 h4{
    width: 95vw;
    position: relative;
    left : 2%;
  }
  #top1 .top1-text1{
    height: 200px;
  }
  #top1 .top1-text2{
    height: 220px;
    /* background: #c7e0fa; */
  }
  #top1 .top1-text4{
    position: relative;
    height: 700px;
    /* background: #d5d4d4;  */
  } 
#top1 .photo-top1 img{
  width: 400px;
  height: 230px;
}
#top1 .photo-top1{
  height: 500px;
}
#top1 .top1-text5{
  height: 700px;;
}







  /* ＜東征物語に登場するナガスネヒコとニギハヤキとはどんな人？＞*/
  #top2{
    height: 1700px;
    /* background: #ccedc3;     */
  }
  #top2 .top2-text1{
    width: 98vw;
    height: 250px;
    /* background: #dcdcdc; */
  }
  #top2 .top2-text1 h4{
width: 95vw;
position: relative;
left : 3%;
  }
  .top2-text2{
    display: block;
    height: 1200px;
    /* background: #c8ddf4; */
  }
  .photo-top2{
    width: 98vw;
  }
  #top2 .text-top2{
    width: 96vw;
    position: relative;
    left: 2%;
    text-align: left;
  }
 #top2 .text-top2 h4{
    width: 92vw;
    position: relative;
    left : 1%;
    text-align: left;
  }



  /* 『長髄彦（ながすねひこ）とは』 */
  #top3{
    height: 2950px;
  /* background: #e2eef0;  */
  }
  #top3 h4{
    width: 96vw;
    position: relative;
    left : 2%;
    text-align: left;
  }
  
  #top3 .photo-top3{
    height:1600px;
    /* background: #c7e0fa; */
    position: relative;
    top : -100px;
  }
  .top3-a{
    width: 98vw;
    height: 900px;
  }
  .top3-b{
    width: 98vw;
    height: 800px;
  }
  .photo-top3{
    display: block;
  }
#top3 .tomio h4{
width: 92vw;
}
#top3 p{
  font-size: 12px;
}


  /* 『饒速日命（にぎはやひのみこと）とは』 */
  #top4{
height: 5700px;
 /* background: #df6262;  */
  }
  .nigi{
    height: 500px;
  /* background: #deedf1;  */
  }
#top4 .nigi h4{
  width: 80vw;
  position: relative;
  left : 7%;
}
#top4 .hayahi{
  height: 900px;
 background-image: url(./images/hayahiSP.webp); 
  /* background-color: #e6d6ff;  */
  position: relative;
  top :-370px;
}
.bk4{
  background-color: rgba(0, 0, 0, 0.32);
  width: 100%;
  height: 900px;
}
#top4 .bk4 h4{
  width: 80vw;
  position: relative;
  left : 7%;
}
.top4-text1{
  height: 300px;
  /* background: #038977; */
}
.top4-text1 p{
position: relative;
top : -200px;
}
.top4-text2{
  height: 300px;
  /* background: #c8ddf4; */
}
.top4-text3{
  height: 200px;
  position: relative;
  top :50px;
}

/* 一の矢 */
#top4 .rin1{
  height: 950px;
  display: block;
  /* background: #fde2cd; */
  position: relative;
  top : 300px;

}
#top4 .ya1-a{
  width: 97vw;
}
#top4 .ya1-a h4{
  width: 85vw;
  position: relative;
  left : 5%;
  height: 500px;
}
.ya1-b{
  width: 97vw;
}

/* 二の矢 */
.rin2{
  height: 900px;
  display: block;
  /* background: #fde2cd; */
  position: relative;
  top : 300px;
}
#top4 .ya2-a{
  width: 97vw;
}
#top4 .ya2-a h4{
  width: 85vw;
  position: relative;
  left : 5%;
}
#top4 .ya2-b{
  width: 97vw;
}


/* 3の矢 */
.rin3{
  height: 500px;
  display: block;
  /* background: #fde2cd; */
  position: relative;
  top :300px;
}
.ya3-a{
  width: 97vw;
  position: relative;
  top : 50px;
}
#top4 .ya3-a h4{
  width: 85vw;
  position: relative;
  left : 5%;
  height: 600px;
  /* background: #eb643f; */
}
.ya3-b{
  width: 97vw;
}

.hime{
  height: 1000px;
  /* background: #5f5f5f;  */
  position: relative;
  top : 820px;
}
.mika{
  height: 900px;
  background-image: url(./images/ichiyaSP.webp);
}
#top4 .bk5 {
height: 900px;
  background-color: rgba(0, 0, 0, 0.42);
}
#top4 .bk5 h4{
  width: 85vw;
  position: relative;
  left : 5%;
}






  /*＜東征は大和王朝確立にはなぜ必要なものだったのでしょうか？＞  */
  #top5{
  /* background: #ce6bf8; */
  height: 5800px;
  position: relative;
  left : 1%;
  }
  #top5 h4{
    width: 90vw;
    position: relative;
    left : 2%;
  }
  .text-top5a{
height: 200px;
/* background: #fff; */
  }
  .text-top5b{
    height: 200px;
    /* background: #c8ddf4; */
  }
  .text-top5c{
    height: 500px;
    /* background: #a7c7e8; */
  }

  .ten{
    display: block;
  }
  .miwa{
    display: block;
  }
  .okite{
    display: block;
    height: 1300px;
    /* background: #dcdcdc;  */
  }
  .box1{
    width: 98vw;
    height: 600px;
    /* background: #eb5b5b; */
  }
  .box2{
    width: 98vw;
    height: 700px;
    /* background: #eebd97; */
  }
  #top5 .okite h5{
    width: 96vw;
    /* background: #efefef; */
  }
  .keiyaku{
    height: 600px;
  }
  .jin{
    height: 800px;
    /* background: #c7e0fa; */
  }

  .shiki{
    display: block;
    height: 1300px;
    position: relative;
    left : 0;
  /* background: #e6d6ff;  */
  }
  #top5 .text-mono{
    width: 98vw;
  }
  #top5 .shiki h5{
    width: 90vw;
    position: relative;
    left : 1%;
  }
  #top5 .photo-shiki{
    width: 98vw;
  }
  .photo-shiki img{
    width: 400px;
    height: 560px;
    position: relative;
    top : 0px;
  }
  
  



  
  #top6{
   /*＜１０代崇神天皇は神武天皇のようだった？＞  */
  height: 2000px;
  /* background: #c9f0fc;     */
    position: relative;
    left : 1%;
    top : 0px;
    width: 98vw;
  } 
  .hatu{
    display: block;
    height: 800px;
  }
  .sujin{
    width: 90vw;
    position: relative;
    left : 2%;
  }
  .kaikaku {
    width: 90vw;
    position: relative;
    left : 2%;
    height: 600px;
  }
  #top6 h4{
    width: 90vw;
    position: relative;
    left : 2%;
  } 
  








  #butn{
    height: 300px;
  } 





/* Footerスマホ___________ */
footer{
display: block;
width: 100vw;
text-align: center;
height: 600px;
position: relative;
left :5px;
}
#com-footer{
  position: relative;
  left : 10px;
  /* background: #f6e5e5; */
  width: 90%;
}

.bun-nav{
  width: 350px;
  position: relative;
  right :0%;
}
#bun-footer{
  position: relative;
  left :0;
}
.bun-blk ul{
  position: relative;
  right: 0px;
  width: 350px;
}
.bun-inner{
  position: relative;
  top :20px;
}
}