body {
margin:0;
padding:0;

color:#2d2d2d;
font-family:Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Open Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

a{
text-decoration:none;
}


.toplogo{
width:100%;
max-width:960px;
margin:25px auto;
text-align:center;
}

.toplogo .one,.toplogo .two{
width:100%;
}

@media screen and (max-width:680px) {
.toplogo{
width:200px;
margin:25px auto;
text-align:center;
}

.toplogo .one a img{
width:60%;
}

.toplogo .two a img{
width:100%;
}
}


header{
background-color:white;
height:55px;
width:100%;
position:relative;
}

header p{
font-size:12px;
font-size:1.2rem;
margin:0;
padding:0.5%;
position:absolute;
left:0;
}

@media screen and (max-width:680px) {
header p{
font-size:10px;
font-size:1.0rem;
margin:0;
padding:1%;
position:absolute;
left:0;
}
}

.headerbox{
margin:0 auto;
text-align:center;
position:absolute;
right:0;
padding:0.5%;
}

@media screen and (max-width:680px) {
.headerbox{
margin:0 auto;
text-align:center;
position:absolute;
right:0;
padding:1%;
}
}

.headerbox .circle,.footerbox .circle{
display:inline-block;
margin:0 5px;
width:30px;
height:30px;

border:1px black solid;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
-o-border-radius:100px;
-ms-border-radius:100px;

transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.headerbox .circle:hover,.footerbox .circle:hover{
background-color:black;
}

.headerbox .circle-in,.footerbox .circle-in{
width:100%;
height:100%;
color:black;
position:relative;
}

.headerbox .circle-in:hover,.footerbox .circle-in:hover{
color:white;
}

.headerbox .circle-in a,.footerbox .circle-in a{
position:absolute;
color:#444;
width: 100%;
display: block;

transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.headerbox .circle-in a:hover,.footerbox .circle-in a:hover{
color:white;
}

.headerbox .fa,.footerbox .fa{
line-height:30px;
}



.topslider{
width:85%;
max-width:480px;
margin: 0 auto;
}

ul.slider{
margin: 0;
padding: 0;
}

.topslider img{
width:100%;
}



nav{
width:95%;
max-width:960px;
margin:0 auto;
padding:5% 0;
}

ul.menu{
display:flex;
justify-content:center;
align-items:center;
margin:0 auto;
padding:0;
list-style:none;
width:100%;
}

@media screen and (max-width:680px) {
ul.menu{
flex-direction:column;
}
}

ul.menu li{
text-align:center;
margin:0 15px;
background-color:white;
}

ul.menu li img{
width:100%;
}

ul.menu li a{
display:block;
color:#2d2d2d;
}

ul.menu li:hover{
opacity:0.5;
}



.top_morocco{
width:100%;
max-width:960px;
margin:0 auto;
text-align:center;
padding:0 0 5% 0;
display:flex;
justify-content:center;
align-items:center;
}

@media screen and (max-width:680px) {
.top_morocco{
flex-direction:column;
}
}

.top_morocco .one,.top_morocco .two{
margin:0 2%;
}

@media screen and (max-width:680px) {
.top_morocco .one,.top_morocco .two{
max-width:400px;
margin:10px 0;
}
}

.top_morocco .one img,.top_morocco .two img{
width:100%;
}

.top_morocco .one img:hover,.top_morocco .two img:hover{
opacity:0.5;
}



footer{
background-color:white;
width:100%;
text-align:center;
font-size:9px;
font-size:0.9rem;
padding:0;
}

@media screen and (max-width:680px) {
footer{
padding:2% 0;
}
}

.footerbox{
margin:0 auto;
text-align:center;
right:0;
padding:50px 0;
}

footer ul.footer_menu{
display:flex;
justify-content:center;
align-items:center;
padding:0;
list-style:none;
}

@media screen and (max-width:680px) {
footer ul.footer_menu{
flex-direction:column;
text-align:left;
}
}

footer ul.footer_menu li{
margin:0 1%;
}

@media screen and (max-width:680px) {
footer ul.footer_menu li{
padding:0;
width:100%;
border-top:1px solid #ccc;
font-size:10px;
font-size:1.0rem;
position:relative;
}

footer ul.footer_menu li:last-child{
border-bottom:1px solid #ccc;
}


footer ul.footer_menu li a:after{
font-family:FontAwesome;
content:"\f178";
position:absolute;
right:4%;
padding:3px 0 0 0;
color:#999;
}

footer ul.footer_menu li a{
display:block;
padding:1.5% 4%;
}

footer ul.footer_menu li a:hover{
opacity:0.5;
}
}

footer p{
margin:0;
padding:20px 0;
color:#999;
font-size:8px;
font-size:0.8rem;
}



.about{
width:100%;
max-width:960px;
margin:0 auto;
font-size:10px;
font-size:1.0rem;
text-align:center;
padding:0 0 100px 0;
}

@media screen and (max-width:680px) {
.about{
width:90%;
}
}

.about p{
font-weight:bold;
}



.news{
width:90%;
max-width:960px;
margin:0 auto;
font-size:10px;
font-size:1.0rem;
padding:0;
list-style:none;
}

.news li{
width:100%;
padding:0;
display:flex;
justify-content:center;
position:relative;
margin: 20px 0;
}

.news li:last-child{
border-bottom:none;
}

.news_boader{
width:80%;
height:1px;
background:#ccc;
margin:10px auto;
}

.news li a{
display:block;
color: #2d2d2d;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.news li .innr{
font-size:10px;
font-size:1.0rem;
margin:0;
width:85%;
}

.news li .innr p.data{
margin:0 0 1% 3%;
}

.news li .innr p.title{
margin:0 0 0 3%;
font-size:13px;
font-size:1.3rem;
line-height:1.3;
margin:0 0 1% 3%;
}

@media screen and (max-width:680px) {
.news li .innr p.title{
font-size:12px;
font-size:1.2rem;
line-height:1.1;
margin:0 0 1% 3%;
}
}

.news li .innr p.txt{
margin:0 0 0 3%;
line-height:1.3;
}

@media screen and (max-width:680px) {
.news li .innr p.txt{
line-height:1.1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
}

.news li div.image{
width:15%;
}

.news li div.image img{
width:100%;
}

.news_page{
width:100%;
margin:20px auto;
text-align:center;
font-size:10px;
font-size:1.0rem;
}




.works{
width:100%;
max-width:960px;
margin:0 auto;
font-size:10px;
font-size:1.0rem;
text-align:center;
padding:0 0 100px 0;
}

@media screen and (max-width:680px) {
.works{
width:90%;
}
}

.works a{
color:#2d2d2d;
}

.works a:hover{
opacity:0.5;
}

.works01{
width:100%;
padding:0 0 50px 0;
}

.works01_boader{
width:50%;
height:1px;
background:#ccc;
margin:50px auto 0;
}

.works02{
width:100%;
padding:0 0 50px 0;
}

span.under{
text-decoration:underline;
margin:0;
}



.handling{
width:100%;
max-width:960px;
margin:0 auto;
font-size:10px;
font-size:1.0rem;
text-align:center;
padding:0 0 100px 0;
}

@media screen and (max-width:680px) {
.handling{
width:90%;
}
}

.handling a{
color:#2d2d2d;
}

.handling a:hover{
text-decoration:underline;
}

.handling01{
width:100%;
border-bottom:1px solid #ccc;
padding:0 0 50px 0;
margin:0 0 50px 0;
}

.handling02{
width:50%;
border-bottom:1px solid #ccc;
padding:0 0 50px 0;
margin:0 auto 50px;
}

.handling03{
padding:5px 0 0 0;
}



table.type{
width: 80%;
max-width: 700px;
border-collapse: collapse;
text-align: left;
line-height: 1.5;
border-top: 1px solid #ccc;
border-left: 3px solid red;
margin:0 auto 5%;
}

table.type th{
width:30%;
padding: 10px;
font-weight: bold;
vertical-align: top;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

table.type td{
width: 70%;
padding: 10px;
vertical-align: top;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}



.privacy{
width:100%;
max-width:960px;
margin:0 auto;
text-align:left;
padding:0 0 100px 0;
}

@media screen and (max-width:680px) {
.privacy{
width:90%;
}
}

.privacy p{
margin:0;
padding:20px 0 5px 0;
font-weight: bold;
}