@charset "utf-8";
/*==================================================
layout
===================================*/
.wrapper{
	overflow: hidden;
	text-align:center;
}

body{
	font-family:Roboto,YakuHanJPs,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"游ゴシック体","Yu Gothic",YuGothic,sans-serif;
}
@media screen and (max-width:768px) {
body{
	margin-top:0px;
	margin-bottom:0px;
}
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

a:link { color: #000; }
a:visited { color: #000; }
a:hover { color: #000; }
a:active { color: #000; }

.profile{
	background-color:#f4f4f4;
	width:100%;
	height:auto;
}

.profile h1{
	font-size:1rem;
    font-weight: bold;
    padding: 4rem 2rem 1rem;
}

.profile h2{
	font-size:0.8rem;
	padding:0rem 10rem 5rem;
    font-weight: bold;
}
.profile .center {
	text-align: left;
    width: 100%;
    max-width: 905px;
    margin: 0 auto;
    padding: 0%;
}

.profile p{
    font-size: 1rem;
    letter-spacing: 1px;
    text-align: left;
    margin: 0%;
    font-weight: bold;
    padding: 0rem 2rem 4rem;
}

@media screen and (max-width:768px) {
.profile .center {
	text-align: left;
    width: 100%;
    max-width: 610px;
    margin: 0 auto;
    padding: 0%;
}
.profile p{
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-align: left;
    margin: 0%;
    padding: 0rem 2rem 4rem;
}
.profile h1{
	font-size:0.7rem;
    padding: 4rem 2rem 1rem;
}
}

@media screen and (max-width:768px) {
.profile h2{
	padding:0 2rem 4rem;
}
}


p{
	font-weight:normal;
	font-size:1rem;
	margin:3.0rem 10% 6.0rem;
	letter-spacing:1px;
	text-align:center;
}
@media screen and (max-width:768px) {
p{
	font-size:0.7rem;
	margin:1rem 5% 2rem;
}
 .space p{
	font-size:0.7rem;
	margin:3rem 5% 3rem !important;
}
}
 .space p{
	margin:6.0rem 10% 6.0rem;
}

/*==================================================
.container1 縦長中央
===================================*/
.container1 {
	margin-bottom:10rem;
	text-align:center;
}
.container1 img{
	width:60%;
}
@media screen and (max-width:768px) {
.container1 {
	margin-bottom:3rem;
}
.container1 img{
	width:80%;
}
}
.container11 {
	margin-bottom:5rem;
	text-align:center;
}
.container11 img{
	width:60%;
}
@media screen and (max-width:768px) {
.container11 {
	margin-bottom:1rem;
}
.container11 img{
	width:80%;
}
}
/*==================================================
.container2 横長中央
===================================*/
.container2 {
	margin-bottom:10rem;
	text-align:center;
}
.container2 img{
	width:70%;
}
@media screen and (max-width:768px) {
.container2 {
	margin-bottom:5rem;
}
.container2 img{
	width:100%;
}
}
/*==================================================
.container3 左寄せ
===================================*/
.container3 {
	margin-bottom:10rem;
}
.container3 img{
	width:40%;
	text-align:left;
	margin-left:15%;
}
@media screen and (max-width:768px) {
.container3 {
	margin-bottom:5rem;
}
.container3 img{
	width:50%;
	margin-left:0%;
}
}
.container33 {
	margin-bottom:10rem;
}
.container33 img{
	width:40%;
	text-align:left;
	margin-left:15%;
}
@media screen and (max-width:768px) {
.container33 {
	margin-bottom:5rem;
}
.container33 img{
	width:80%;
	margin-left:0%;
}
}
/*==================================================
.container4 右寄せ
===================================*/
.container4 {
	margin-bottom:10rem;
}
.container4 img{
	width:40%;
	text-align:right;
	margin-left:45%;
}
@media screen and (max-width:768px) {
.container4 {
	margin-bottom:5rem;
}
.container4 img{
	width:50%;
	margin-left:50%;
}
}
.container44 {
	margin-bottom:10rem;
}
.container44 img{
	width:40%;
	text-align:right;
	margin-left:45%;
}
@media screen and (max-width:768px) {
.container44 {
	margin-bottom:5rem;
}
.container44 img{
	width:80%;
	margin-left:20%;
}
}
/*==================================================
top link
===================================*/
.top-link{
	text-align:right;
	margin:0 4em 4em 0;
	font-size:0.9rem;
}
@media screen and (max-width:768px) {
.top-link{
	margin:0 2em 4em 0;
	font-size:0.7rem;
}
}

.btnarrow4{
	position: relative;
    display: inline-block;
	padding: 0 40px;
    color: #333;
    text-decoration: none;
    outline: none;
}

.btnarrow4::before{
    content: '';
	position: absolute;
    bottom:-8px;
    left:15%;
    width: 85%;
    height: 1px;
	background:#333;
    transition: all .3s;
}

.btnarrow4::after{
    content: '';
	position: absolute;
    bottom:-3px;
    right:0;
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    transition: all .3s;
}

.btnarrow4:hover::before{
    left:30%;
}

.btnarrow4:hover::after{
    right:-15%;
}

/*==================================================
footer
===================================*/
#footer{
    color: #999;
    background:#fff;
    height: auto;
    width:100%;
    text-align:center;
}
@media screen and (max-width:768px) {
#footer{
    height: 0vh;
}
}
.sns-link {
    margin:30px 0 15px;
}
@media screen and (max-width:768px) {
.sns-link {
    margin:10px 0 10px;
}
}
.sns-link li{
    text-align:center;
    display:inline-block;
}

.sns-link li img{
     width:25px;   
}
@media screen and (max-width:768px) {
.sns-link li img{
     width:20px;   
}
}
#footer .footer-area{
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
    margin-bottom: 3rem;
}

#footer .footer-logo{
    letter-spacing: 0.5em;
    margin: -10px 0 25px 0;
}

#footer .footer-logo span{
    font-size: 1.6rem;
    display: block;
}

#footer .footer-link{
    justify-content: space-between;
    flex-wrap: wrap;
    padding:10px 0 10px;
}

#footer .footer-link ul li{
    display: inline-block;
     margin: 0 30px;   
}

#footer .footer-link a{
     color:#fff;   
}

#footer small{
     color:#333333ab;  
     font-size: 50%;
     padding-bottom:15px;
}
@media screen and (min-width:769px) {
     padding-bottom:35px;
}
}

#footer #page-top span{
    position: relative;
    top:-10px;
}

#footer #page-top span::before{
     content:'';
    position: absolute;
    left:50%;
    top:-3px;
    background:#6C6C6C;
    width:1px;
    height: 30px;
}

#footer #page-top span::after{
    content:'';
    position: absolute;
    left:6px;
    top:-7px;
    background:#6C6C6C;
    width:1px;
    height: 20px; 
    transform: rotate(-45deg);
}

@media screen and (min-width:769px) {
#footer #page-top a:hover span::before,
#footer #page-top a:hover span::after{
     background:#fff;   
}
}

@media screen and (max-width:768px) {
    #footer .footer-info{
        width: 100%;
        text-align: center;
    }
    #footer .footer-logo{
        margin: 0;
    }
    
    #footer .footer-link{
        width:100%;
        display: block; 
    }

    #footer .footer-link ul{
        text-align: center;
        margin: 30px 0 15px;
        line-height: 3;
    }
    
    #footer small{
         display: block;
        text-align: center;
    }
}

/*==================================================
animation
===================================*/
.effect-fade {
  opacity: 0;
  transform: translate(0, 100px); 
  transition: all 2000ms;
}
.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

/*==================================================
slider
===================================*/
.slider {
	list-style: none;
    margin: 6rem auto 1.5rem;
   width:94%;
    }

.slider p {
    margin: 0.4rem 10%;
}
@media screen and (min-width: 769px) {
    .slider {
        display: flex;
        flex-wrap: wrap;
        max-width: 1264px;
    }
    .slider li {
        margin: 0 1.5% 38px 0;
        width: 18.8%;
    }
    .slider li:nth-child(5) {
        margin-right: 0;
    }
}

@media screen and (max-width:768px) {
.slider {
    margin:5rem auto 1rem;
}
 .slider p {
        margin: 0.25rem auto;
        font-size: 75%;
        text-align: center;
    }
}

.slider img {
    width:100%;
    height:auto;
}

.slider .slick-slide {
    margin:0 10px;
}

.slick-prev, 
.slick-next {
    position: absolute;
    top: 32%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    height: 15px;
    width: 15px;
}

.slick-prev {
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {
    right: -1.5%;
    transform: rotate(45deg);
}