* {
  margin:0; padding:0;/*アスタリスクは全ての要素に適用するという意味*/
}

html{
  height: 100%;
  font-size: 62.5%;
}

body{
  background-color:#98bbcc;
  background-image : url(s7.png);
  background-position : 100% 10%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1{
  font-size: 2.4rem;
}

a{
  font-weight: bold;
  text-decoration: none;
}

a:hover{
  text-decoration: underline
}

img {
 max-width: 90%;
 height:auto;
}

header {
  background-image: url(s8.png);
  border: dashed 1px #444444;
  color: #ffffff;
  font-family: Georgia;
  font-size: 1.6rem;
  font-weight: bold;
  text-shadow: 0 0.05em 0.08em rgba(0,0,0,0.7);
  display: flex;
  position: fixed;
  padding: 5px 10px 5px 10px;/*上、右、下、左*/
  width: 100%;
}

header ul{
  list-style-type: none;
  display: flex;
  align-items: center; /* 上下中央揃え */
  margin: 0 20px 0 20px;/*上、右、下、左*/
}

header li{
  margin: 0 10px 0 10px;/*上、右、下、左*/
}

header ul li a{
  color: #ffffff;
}

header ul li a:hover{
  color: #ffffff;
}

@media only screen and (min-width: 431px)/* PC用 */{
.log{
  display: flex;
  justify-content: center;
  list-style: none; 
  margin: 10px;
  padding-left: 0;
  flex-wrap: wrap;
}
.log li{
  border: dashed 1px #787878;
  background: #eeeeee;
  color: #217599;
  font-size: 1.1rem;
  font-family: Georgia;
  text-align: center;
  width: 30px;
  height: 8px;
  margin: 10px;/*上、右、下、左*/
  padding: 5px 5px 10px 5px;/*上、右、下、左*/
}

.main{
  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif ;
  font-size: 1.6rem;
  text-align: center;
  margin: 0 auto;/*上、右、下、左*/
  padding: 70px 15px 15px 15px;
  width: 55%;
}
.box{
  background-color: #eeeeee;
  border: 1px dashed #444444;
  border-radius: 6px;
  color:#343434;
  font-size: 1.5rem;
  text-align:center;
  padding: 20px 15px 15px 15px;
  margin: 0 auto 30px auto;/*上、右、下、左*/
  width: 55%;
}

.box p{
  line-height:1.6;
  text-align:left;
  margin: 20px auto 30px auto;/*上、右、下、左*/
  width: 88%;
}
.link ul{
  text-align: center;
  margin-left: -10px;
}

.link li{
  display: inline-block;
  margin: 30px 0 0 10px;/*上、右、下、左*/
}
}

@media only screen and (max-width: 430px)/* それ以外 */{
.log{
  display: flex;
  justify-content: center;
  list-style: none; 
  margin: 5px;
  padding-left: 0;
  flex-wrap: wrap;
}

.log li{
  border: dashed 1px #787878;
  background: #eeeeee;
  color: #217599;
  font-size: 1.1rem;
  font-family: Georgia;
  text-align: center;
  width: 30px;
  height: 8px;
  margin: 5px;/*上、右、下、左*/
  padding: 5px 5px 10px 5px;/*上、右、下、左*/
}
.main{
  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif ;
  font-size: 1.6rem;
  text-align: center;
  margin: 0 auto;/*上、右、下、左*/
  padding: 70px 15px 15px 15px;
  width: 88%;
}
.box{
  background-color: #eeeeee;
  border: 1px dashed #444444;
  border-radius: 6px;
  color:#343434;
  font-size: 1.5rem;
  text-align:center;
  padding: 20px 15px 15px 15px;
  margin: 0 auto 35px auto;/*上、右、下、左*/
  width: 88%;
}

.box p{
  line-height:1.6;
  text-align:left;
  margin: 20px auto 30px auto;/*上、右、下、左*/
  width: 88%;
}

.link ul{
  text-align: center;
  margin-left: -10px;
}

.link li{
  display: inline-block;
  margin: 0 0 5px 0;/*上、右、下、左*/
}
}

.log a{
  color: #217599;
}

.circle{
  background: #eeeeee;
  border: dashed 1px #444444;
  border-radius: 50%;
  color: #217599;
  display: inline-block;
  height: 60px;
  line-height: 60px;
  text-align: center;
  vertical-align: middle;
  font-size: 1.2rem;
  width: 60px;
  margin: 0 0 20px 0 ;
}

.ji{
  border-bottom: 1px dashed #444444;
  color: #241212;
  font-size: 1.5rem;
  text-align: left;
  letter-spacing: 1px;
  line-height: 180%;
  margin: 0 0 0 0 ;/*上、右、下、左*/
  padding: 10px 0 0 0 ;/*上、右、下、左*/
}

.info ul{
  line-height: 1.7;
  list-style: none; 
  margin: 10px auto;
  padding: 5px 10px 5px 10px;/*上、右、下、左*/
  display: inline-block;
  text-align: left;
}

.info li{
  margin: 0 10px 0 10px;/*上、右、下、左*/
}

.iro1{
  color:#ffffff;
  text-shadow: 1px 1px 0 #217599, -1px -1px 0 #217599,
  -1px 1px 0 #217599,  1px -1px 0 #217599,
  1px 0 0 #217599, -1px  0 0 #217599,
  0 1px 0 #217599,  0 -1px 0 #217599;
  border-bottom:  dashed 1px #444444;
}

.iro2{
  border-bottom: 1px dashed #444444;
  color:#7688aa;
}

.accordion {
 margin-top: 20px;
 margin-right: auto;
 margin-left: auto;
 border: 1px dashed #444444;
}
.accordion__summary {
  background-image: url(s9.png); /* アコーディオンの見出しの背景色 */
  color: #217599;
  position: relative;
  display: block;
  cursor: pointer;
  padding: 10px 40px 10px 20px;
}
.accordion__summary::after {
  content: "+";
  font-size: 1.4em; /* 記号のサイズ */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.accordion input:checked ~ .accordion__summary::after {
  content: none;
}
.accordion input {
  display: none;
}
.accordion__detail {
  display: none;
  padding: -14px 10px;
  margin: 10px 0;
}
.accordion input:checked ~ .accordion__detail {
  display: block;
}
.accordion__text {
  margin: 0;
}

footer{
  background-image: url(s8.png);
  border: dashed 1px #444444;
  color: #ffffff;
  font-family: Georgia;
  font-size: 1.6rem;
  font-weight: bold;
  text-shadow: 0 0.05em 0.08em rgba(0,0,0,0.7);
  text-align: center;
  padding: 3px 10px 3px 10px;/*上、右、下、左*/
  margin-top: auto;
}

.bluemin{
  font-size:75%;
}