@charset "UTF-8";
@import "reset.css";

.rm{
font-family: a-otf-ryumin-pr6n, serif;
font-style: normal;
font-weight: 300;}


/*基本設定*/
html {
height:100%;
margin:0;
	padding: 0;
}

body {
height:100%;
margin:0px auto !important;
padding:0px;
line-height: 1.5;
color:#333333;
overflow:auto;
text-align:center;
position: relative;
}
a:link{
color:#333333;
text-decoration:none;
}
a:hover{
color:#777777;
text-decoration:none;
}
a:visited{
color:#333333;
text-decoration:none;
}
a:active{
text-decoration:none;
}
a{
outline:none;
}

img { vertical-align: bottom; }
a:hover img{filter:alpha(opacity=70);
    -moz-opacity: 0.7;
	opacity: 0.7;}
.center{ text-align:center;}
.left{ text-align:left;}
.right{ text-align:right;}
.fl{ float: left;}
.fr{ float: right;}

@media (min-width: 768px) {
/* tablet+PC用 */
    .for-tbpc { display: block;}
    .for-sp {display: none;} /*spだけ表示on*/
    .wpr {
        clear: both;
        margin:0 3%;}
.pc_fl{ float: left;}
.pc_fr{ float: right;}
}

@media (min-width: 768px) and (max-width: 1060px){
/* tablet用 */
    .for-pc { display: none !important;} /*PCだけ表示on*/
    img { max-width: 100%;}
}
@media (min-width: 1061px) {
/* PC用 */
    .for-tb{display: none;}
    .for-pc {display: block;} /*PCだけ表示on*/
    
    .wpr {
        width:1000px;
        margin:0 auto;
    }
}

@media (max-width: 767px) {
/* SP用 */
    .for-tbpc{ display: none !important;} /*tbとpcだけ表示on*/
    .for-sp{display: block;} /*spだけ表示on*/
    .for-tb{display: none !important;} /*tbだけ表示on*/
    .for-pc{display: none !important;} /*PCだけ表示on*/
    .spn{ display: none; }
    .wpr {
        clear: both;
        margin:0;
    }

    img { width: 100%; height: auto;}
    .smt30{ margin-top: 30px; }
    .smt50{ margin-top: 50px; }
    .smb10{ margin-bottom: 10px; }
    .smb30{ margin-bottom: 30px; }
    .sp_img img{ width: inherit; }

    .imga{ width: auto; }
    .spdn{ display: none; float: none !important; }
    .spfn{ float: none !important; }
    .sw10 img{ width: 10% !important; margin: auto; text-align: center; }
    .sw20 img{ width: 20% !important; margin: auto; text-align: center; }
    .sw30 img{ width: 30% !important; margin: auto; text-align: center; }
    .sw40 img{ width: 40% !important; margin: auto; text-align: center; }
    .sw50 img{ width: 50% !important; margin: auto; text-align: center; }
    .sw60 img{ width: 60% !important; margin: auto; text-align: center; }
    .sw70 img{ width: 70% !important; margin: auto; text-align: center; }
    .sw80 img{ width: 80% !important; margin: auto; text-align: center; }
    .spf14{ font-size: 14px !important; }
    .pd10{  padding: 10px;}
    .smb10{ margin-bottom: 10px; }
    .ttlh20{width: auto !important; height: 20px !important;}

}/* sp_end


/* css_start
--------------------------------------------------*/

/* header
-------------------------*/


#header{width:100%; 
}
#header_inner{ margin: 50px auto; max-width: 1060px; text-align: center;}
#header h1{ margin: 50px auto;}

@media (min-width: 769px) {

}
@media (min-width: 768px) and (max-width: 1000px){
}


@media (max-width: 768px) {

/* SP用 */
#header{  padding:10px 0; 
} 
#header h1{  margin: 20px auto;  width: 50%; }
}



/* contents
-------------------------*/
#contents #random{display: flex; justify-content: space-between;flex-wrap: wrap; }
#contents #random div{ width: 15%; background: #EFEFEF; padding:30px;}
#contents #random div:nth-child(2n){background: #FFF;}
#contents #random div a{display: block;}
#contents #random div span{ margin: 10px auto 10px; text-align: center; display: block; font-weight: bold; font-size: 14px;}
#contents #random div img{ width: 100%;}
#contents #random div ul li{border-radius: 5px; padding: 3px 10px; line-height: 1; color: #FFF;display: inline-block; margin:5px 5px 0 0;}
#contents #random ul li.d{background-color: #ec008c; }
#contents #random ul li.md{background-color: #BC14D4; }
#contents #random ul li.c{background-color: #0066cc; }
#contents #random ul li.w{background-color: #6D4CCC; }
#contents #random ul li.t{background-color: #238669 ; }

/* footer
-------------------------*/
#footer{ margin:100px auto 0;}

@media (min-width: 768px) and (max-width: 1000px){
}


@media (max-width: 768px) {
/* SP用 */
#contents #random div{ width: 90%; padding:20px 5%; display: block; }
#contents #random div img{ width: 100%;}

}


.copyright{ font-size:85%; padding: 0 10px 10px 10px;}

/* footer
-------------------------*/

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
	text-indent: -9999px;
	background: url("../../common/img/pagetop.svg") 0 0 no-repeat;
	background-size: 40px 40px;
	height: 40px;
	width: 40px;
line-height: 40px;
}
#page-top:hover {
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
	opacity: 0.8;
}








.common_css{ background: #f3f1eb;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
	opacity: 0.8;}





body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

/* fadein */

.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


@media (max-width: 767px) {
/* SP用 */
}