@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Zen+Kaku+Gothic+New&display=swap');

/* 全体に適用する */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font: normal normal 16px/1.7em 'Poppins', 'Zen Kaku Gothic New', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* リンク */
a {
position: relative;
display: inline-block;
transition: .3s;
color:#043c78;
}
a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;
background-color: #043c78;
transition: .3s;
}
a:hover::after {
width: 100%;
}
a:visited{
border-bottom:1px solid #043c78;
}

/* ヘッダー */
header {
width:90%;
height:20vh;
line-height:20vh;
margin:4em auto;
background:linear-gradient(-45deg, transparent 25%, #bccddb 25%, #bccddb 50%, transparent 50%, transparent 75%, #bccddb 75%, #bccddb);
background-size:7px 7px;
text-align:center;
}

/* メイン */
main {
width:90%;
max-width:600px;
margin:1em auto;
}

section {
margin: 50vh auto;
}

#main p {
margin:0 0 2rem 0;
}
/* 見出し */
h2{
width:200px;
margin-bottom:6px;
border:1px solid #000;
background:#000;
color:#fff;
text-align:center;
text-transform:uppercase;
letter-spacing:3px;
font-size:0.8em;
}
h3{
width:200px;
margin-bottom:6px;
border:1px solid #000;
background:#fff;
color:#000;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
font-size:0.8em;
}
h4{
display:inline-block;
padding-bottom:2px;
margin-bottom:8px;
border-bottom:2px solid #000;
letter-spacing:1px;
}

/* フォーム */
input, input:focus, input[type="text"], input[type="submit"], textarea {
width: 100px;
height: 1.7em;
margin: 4px auto;
padding: 4px;
font-size: 0.8em;
text-transform: uppercase;
border: 1px solid #000;
border-radius: 0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow: none;
outline: none;
vertical-align: middle;
position: relative;
top: -2px;
}
textarea {
display: block;
min-width: 300px;
min-height: 88px;
line-height: 20px;
margin: 4px 4px 4px 0;
color:#000;
}
input[type="submit"] {
padding:0;
line-height:1em;
word-break:break-all;
text-align:center;
}
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-moz-placeholder { color: #999; }
input:-ms-placeholder { color: #999; }
input::placeholder { color: #999; }
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color:transparent; }


/* ハンバーガーメニュー */
.icon, .icon span{
display:inline-block;
transition:all .6s;
z-index:3;
}

.icon{
position:fixed;
top:1.5em;
right:1.5em;
width:40px;
height:50px;
}

.icon span{
display:block;
position:absolute;
width:100%;
height:1px;
background-color:#043c78;
}

.icon span:nth-of-type(1){top:0;}

.icon span:nth-of-type(2){top:15px;}

.icon span:nth-of-type(3){top:30px;}

.icon.active span:nth-of-type(1){
background-color:#fff;
top:10px;
-webkit-transform:rotate(-315deg);
transform:rotate(-315deg);
}

.icon.active span:nth-of-type(2){opacity:0;}

.icon.active span:nth-of-type(3){
background-color:#fff;
top:10px;
-webkit-transform:rotate(315deg);
transform:rotate(315deg);
}

#nav {
display:table;
background:#043c78;
text-align:center;
width:100vw;
height:100vh;
-webkit-transition:ease-in-out .6s;
transition:ease-in-out .6s;
-webkit-transform:translate(100vw);
transform:translate(100vw);
position:fixed;
top:0;
right:0;
z-index:2;
}

#nav.on {
-webkit-transform:translate(0);
transform:translate(0);
}

#nav ul {
vertical-align:middle;
display:table-cell;
}

#nav ul h1 {
color:#fff;
text-shadow:0 0 2px #bccddb, 0 0 2px #bccddb;
}

#nav ul li{
margin:1em 0;
font-size:17px;
text-transform:uppercase;
}

#nav ul li a {
color:#bccddb;
transition : .3s;
}
#nav ul li a:hover {
color:#fff;
filter: blur(1px);
transition : .3s;
}