@charset "UTF-8";
/* CSS Document */

/* 中身-モバイルファースト======================================================================================================== */
#introduction .title{
margin-bottom: 10px;
}
#introduction .title h3{
font-size: 6.5vw;
color: #8c0000;
}
#introduction .copy01{
margin-bottom: 20px;
}
#introduction .copy02{
margin-bottom: 20px;
}
#introduction .img02{
margin-bottom: 20px;
}


#miryoku .btn{
margin-bottom: 20px;
}
#miryoku .flex .img{
margin-bottom: 10px;
}


#list ul li{
margin-top: 10px;
text-align: center;
}
#list ul li:first-child{
margin-top: 0px;
}
#list ul li a{
display: block;
background-color: #000;
}

/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#introduction{
text-align: center;
}
#introduction .title{
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
text-align: left;
margin-bottom: 60px;
}
#introduction .title .img01{
margin-left: 40px;
}
#introduction .title h3{
font-size: 50px;
white-space: nowrap;
}


#introduction .copy01{
margin-bottom: 40px;
display: inline-block;
font-size: 18px;
text-align: left;
background-image: url("images/copy01_bg.jpg");
background-image: -webkit-image-set(url("images/copy01_bg.jpg") 1x, url("images/copy01_bg@2x.jpg") 2x);
background-repeat: no-repeat;
background-position: right center;
padding-right: 220px;
}
#introduction .copy01 .title{
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}
#introduction .copy01 .img{
width: 320px;
}

#introduction .img02{
margin-bottom: 40px;
}


#introduction .copy02{
margin-bottom: 40px;
display: inline-block;
font-size: 18px;
text-align: left;
background-image: url("images/copy02_bg.jpg");
background-image: -webkit-image-set(url("images/copy02_bg.jpg") 1x, url("images/copy02_bg@2x.jpg") 2x);
background-repeat: no-repeat;
background-position: left center;
padding-left: 220px;
min-height: 220px;
}

#miryoku .btn{
margin-bottom: 40px;
text-align: center;
}
#miryoku .flex{
display: flex;
align-items: center;
}
#miryoku .flex .img{
margin-bottom: 0px;
}
#miryoku .flex .text{
flex: 1;
margin-left: 40px;
font-size: 16px;
}


#list ul{
display: flex;
flex-wrap: wrap;
}
#list ul li{
width: 50%;
margin-top: 20px;
padding: 0 10px;
}
#list ul li:nth-child(-n+2){
margin-top: 0px;
}






}