@charset "utf-8";
*{
  margin: 0;
  padding: 0;
}
body{
  line-height: 1;
  font-family: sans-serif
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
  color: inherit;
  display: block;
}
img{
  max-width: 100%;
  vertical-align: bottom;
}
.pcnav,.info img{
  display: none;
}

/*fontAwsume*/
header,h2{
font-family: 'Caveat', cursive;
}
.keyVis{
font-family: 'EB Garamond', serif;
}

/*スマホメニュー*/
.btn{
width: 50px;
text-align: center;
color: #900;
border: 1px solid #900;
border-radius: 5px;
background: rgba(255, 255, 255, 0.4);
font-size: 35px;
position: fixed;
top: 5px;
right: 5px;
}
.btn i{
display: block;
line-height: 50px;
}
/*トップに戻るボタン*/
.top{
  position: fixed;
  right: 5px;
  bottom: 5px;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #900;
  border: 2px solid #900;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.4);
}
.top i{
  display: block;
  font-size: 24px;
}
/*スマホナビゲーション*/
.spnav{
position: fixed;
width: 100%;
top: 57px;
}
.spnav li{
text-align: center;
line-height: 70px;
font-size: 1.5em;
}
.spnav a{
color: #fff;
font-weight: bold;
background:
rgba(238, 110, 68, 0.8);
border-top: 1px solid #fff;
}

/*header*/
header{
  padding: 20px 0;
  text-align: center;
  font-weight: bold;
  background: #dd9;
}
h1{
  margin-bottom: 10px;
  font-size: 30px;
}

/*keyVisual*/
.keyVis{
  margin-bottom: 20px;
  height: 250px;
  text-align: center;
  background: url(../img/keyVis-m.jpg)
   no-repeat center top/cover;
}
.keyVis p{
  padding: 50px 0 40px;
  font-size: 3em;
  color: #fff;
  text-shadow: 0 0 3px #000;
  text-shadow: 0 0 3px #000;
  text-shadow: 0 0 7px #a31;
  text-shadow: 0 0 7px #a31;
}
/*snsアイコン*/
.sns a{
  display: inline;
    font-size: 50px;
  color: #eee;
}
.sns a+a{
  margin-left: 10px;
}

/*メインコンテンツ*/
main{
  max-width: 960px;
  margin: 0 auto;
}
main section{
  margin: 0px 10px 10px 20px;
}
h2{
  padding-bottom: 10px;
  text-align: center;
  font-size: 40px;
  text-shadow: 3px 3px 2px #ebb;
}
section p{
  line-height: 1.5;
}
section img{
  margin-bottom: 10px;
  display: block;
  margin-inline: auto;
}
.more{ 
  margin-top: 15px;
  padding: 20px 0;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid #555;
  border-radius: 5px;
  background: linear-gradient(#fff,#ab7);
}

/*インフォメーション*/
.info dl{
  padding: 1em;
  border: 1px solid #000;
  background: #eeb;
  overflow: hidden;
}
.info dt{
  float: left;
  font-weight: bold;
  font-size: o.8em;
}
.info dd{
  margin: 0  0 20px 190px;
  line-height: 1.3em;
  font-size: 0.8em;
}

/*footer*/
footer{
  padding: 20px 0;
  text-align: center;
  background: #dd9;
}


@media screen and (min-width:744px){

.btn,.top,.spnav{
  display: none;
}
.pcnav,.info img{
  display: block;
}

.container{
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 10px;
  display: flex;
  justify-content: space-between;
}

header,footer{
  padding: 30px 0;
}

h1{
  font-size: 3.5em;
}
header p{
  font-size: 1.7em;
}


header .container{
  align-items: flex-end;
}
.pcnav{
  width: 40%;
}


.keyVis{
  height: 400px;
  background:
    url(../img/keyVis-pc.jpg)
    no-repeat center top/cover;
}
.keyVis p{
  font-size: 5em;
  padding: 100px 0 50px;
}
.sns i{
  height: 43px;
  border-radius: 5px;
}
.sns a:nth-child(1):hover{
  color: #2e3192;
  background: #fff;
}
.sns a:nth-child(2):hover{
  color: #29abe2;
  background: #fff;
}
.sns a:nth-child(3):hover{
  color: #06c755;
  background: #fff;
}
.sns a:nth-child(4):hover{
  background: 
  radial-gradient(
  circle at 30% 107%,
  #fdf497 5%,
  #fd5949 45%,
  #d6249f 60%,
  #285AEB 90%
  );
  color:transparent;
  background-clip: text;
/* ベンダープレフィックス */
  -webkit-background-clip: text;
}

main{
  padding: 50px 0;
}
.container section{
 width: calc(1/3*100%);
 margin: 0;  
}
section a{
 padding: 1em;
}
section a:hover{
 background: #ce7; 
}

h2{
  font-size: 24px;
}
main img{
  height: 200px;
  object-fit: cover;
}
section p:first-of-type{
 height: 8em;
}
.more{
  display: inline;
  padding: 3px 12px;
}

.info{
  margin-top: 50px;
}
.info dl{
  margin-right: 1em;
}

}