header{
  overflow:hidden;
  height: min(88px, 20vw);
  margin-bottom: 0.5em;
  
}

header img{
  width: min(650px, 60vw);
  position: relative;
  left: 53%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header__menu{

}

.header__navi{
  width: 20em;
  margin-left: auto;
  margin-right: 2em;
  margin-bottom: 2em;
}

.header__navi ul{
  display: flex;
  justify-content: space-between;
}

.header__navi li{
  
}

.jphead{
  text-align:center;
  font-size: 3.5rem;
  margin-bottom: 1.5em;
  font-weight: 900; 
}

.main{

  width:min(1200px,100vw);
  padding:2em;
  margin:0 auto;

}

.box{
margin-bottom:2em;
}

h1,h2{
  line-height:2;
  font-size:1.5rem;
}

h2{
  font-size:1.35rem;
}

.box-img{
  margin: 0 auto;
}

.box1__img{
  width:min(400px ,50%);
  
}

.box1 p{
  margin-bottom:0.5em;
}

.box1 .outer-link{
  margin-bottom:0.5em;
}

.box2__img{
  width: min(100%, 1000px);
}

a,
a:hover,
a:visited{
  color:rgb(59, 59, 167);
  /*text-decoration:underline;*/
}

p{
  line-height:1.75;
}

.box3__images{
  display:flex;
  flex-wrap:nowrap;
  justify-content: space-between;
  width: min(100%, 800px);
  margin: 0 auto;
}

.box3__images img{
  width:33.33%;
}

.box4 p{
  margin-bottom: 1em;
}

.box4 .outer-link{
  margin-bottom: 1em;
}

.box4__img{
  width: min(80%, 600px);
}

.box5__img{
  width: min(80%, 600px);
}

.discription{
  margin-bottom: 2em;
}


.sns__icons{
  display:flex;
  flex-wrap:nowrap;
  justify-content: space-between;
  width: min(70%, 400px);
  margin: 0 auto;
}

.sns__icons a{
  width:18%;
}

@media screen and (max-width:768px){

  header {
    height: min(20vw);
    margin-bottom: 0.5em;
  }

  header img{
    width:140vw;
  }

  .header__menu {
      margin-bottom: 1em;
  }

  .header__navi {
    width: 10em;
    margin-right: 1em;

  }

  .header__navi li{
    font-size:0.85em;
  }

  .main{
    padding:1em;
  }

  .jphead{
      font-size: 2.2rem;
      margin-bottom: 1em;
      line-height:1.25;
  }

  .box1__img{
    width:min(400px ,50%);
  }
  .box6{
    margin-bottom: 0em;
  }
  
}