@charset "utf-8";

/* フォント読み込み */
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Josefin+Sans:400,600,700|Noto+Sans+JP:300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cinzel&display=swap');

body{
font-family: 'Didact Gothic', 'Noto Sans JP',sans-serif;
}
a{
color: #444444;
}
a:hover{
text-decoration:none;
}
a img{
opacity:1.0;
filter:alpha(opacity=100);
-ms-filter:alpha(opacity=100);
transition: all 1s;
-webkit-transition: all 1s;
}

a:hover img{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter:"alpha(opacity=70)";
}

img{
max-width:100%;
}


/* PC */
@media screen and (min-width:481px) {
.for_SP{
display:none;
}
header{
height:120px;
width:100%;
background-color:rgba(255,255,255,0.8);
position:fixed;
top:0;
z-index:2;
}

header h1{
padding:25px;
text-align:center;
}
header h1 img{
height:70px;
}

main{
max-width:1000px;
margin:0 auto;
padding-top:140px;
padding-bottom:80px;
z-index:1;
}
main .main_img{
max-width:1000px;
margin:20px auto;
}
main p{
font-size:16px;
text-align:center;
padding:20px 0 40px;
line-height:2.8;
font-weight:lighter;
letter-spacing:0.1em;
}
main h2{
padding:30px 0 0;
font-size:24px;
}
main h2 span{
border-bottom:1px solid #555;
}
/*main h2 span:hover{
border-bottom:none;
}*/
main h2 small{
font-size:18px;
padding-left:0.5em;
font-weight:normal;
color:#555;
}
main h2 a{
text-decoration:none;
}

main h3{
font-family:'Cinzel' , 'Times New Roman' , Times, serif;
}

main ul{
display:flex;
flex-wrap:wrap;
margin-top:30px;
margin-bottom:60px;
}
main li{
margin-bottom:40px;
}
main li img{
display:block;
}
main li span{
display:block;
font-family:'Cinzel' , 'Times New Roman' , Times, serif;
color:#777;
font-weight:bold;
font-size:200%;
margin:0 0 10px;
}

main .line-2 li{
width:48%;
margin-right:4%;
}
main .line-2 li:nth-child(2n){
margin-right:0;
}
main .line-4 li{
width:22%;
margin-right:4%;
}
main .line-4 li:nth-child(4n){
margin-right:0;
}
main .line-4 li.mr4per{
margin-right:4%!important;
}
main .line-4 li.half{
width:44%;
}
main em{
display:block;
font-size:14px;
margin-top:0.5em;
font-weight:lighter;
color:#555;
}

footer{
padding-bottom:40px;
font-size:16px;
}
footer p{
max-width:1000px;
margin:0 auto;
font-weight:lighter;
color:#777;
line-height:1.8;
}
footer ul{
max-width:1000px;
margin:0.3em auto;
padding:0 2em;
display:flex;
box-sizing:border-box;
}
footer li{
width:35%;
}
}


/* SP */
@media screen and (max-width:480px) {
.for_PC{
display:none;
}
header{
height:8vh;
width:100%;
background-color:rgba(255,255,255,0.8);
position:fixed;
/*box-shadow: 0px 7px 5px -3px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 7px 5px -3px
rgba(0,0,0,0.1);
-moz-box-shadow: 0px 7px 5px -3px rgba(0,0,0,0.1);*/
top:0;
z-index:2;
}

header h1{
padding:1.2vh;
text-align:center;
}
header h1 img{
width:10%;
}

main{
width:96%;
margin:0 auto;
padding-top:9vh;
padding-bottom:6vh;
z-index:1;
}
main .main_img{
margin:2.4vh auto;
}
main p{
font-size:114%;
text-align:center;
padding:2.4vh 0 4.8vh;
line-height:2.8;
font-weight:lighter;
letter-spacing:0.1em;
}
main h2{
padding:3.6vh 0 0;
font-size:150%;
}
main h2 span{
border-bottom:1px solid #555;
}
/*main h2 span:hover{
border-bottom:none;
}*/
main h2 small{
font-size:72%;
padding-left:0.5em;
font-weight:normal;
color:#555;
}
main h2 a{
text-decoration:none;
}

main h3{
font-family:'Cinzel' , 'Times New Roman' , Times, serif;
}

main ul{
display:flex;
flex-wrap:wrap;
margin-top:2.4vh;
margin-bottom:4.8vh;
}
main li{
margin-bottom:3vh;
}
main li img{
display:block;
}
main li span{
display:block;
font-family:'Cinzel' , 'Times New Roman' , Times, serif;
color:#777;
font-weight:bold;
font-size:150%;
margin:0 0 1.2vh;
}

main .line-2 li{
width:48%;
margin-right:4%;
}
main .line-2 li:nth-child(2n){
margin-right:0;
}
main .line-4 li{
width:22%;
margin-right:4%;
}
main .line-4 li:nth-child(4n){
margin-right:0;
}
main .line-4 li.mr4per{
margin-right:4%!important;
}
main .line-4 li.half{
width:44%;
}
main em{
display:block;
margin-top:0.5em;
font-weight:lighter;
color:#555;
}

footer{
padding-bottom:4.8vh;
font-size:114%;
}
footer p{
width:96%;
margin:0 auto;
font-weight:lighter;
color:#777;
line-height:1.8;
}
footer ul{
width:80%;
margin:0.3em auto;
box-sizing:border-box;
}
footer li{
margin-bottom:1.2vh;
}
}