@charset "utf-8";
/*
    外部リンクフォント
*/
/* Noto Sans JP */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap');



/*
    共通スタイル
*/
img {
    vertical-align: bottom;
    width: 100%;
    height: auto;
}
a.link-none {
  pointer-events:none;
  text-decoration: none;
}



/*==================================================
layout
===================================*/
.wrapper{
	overflow: hidden;
	text-align:center;
}

body{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 2;
}
@media screen and (max-width:768px) {
body{
	margin-top:0px;
	margin-bottom:0px;
}
}

.pc { display: block !important; }
.sp { display: none !important; }
 
@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: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 6rem 2rem 1.8rem;
}

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

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

@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.81rem;
        font-weight: 500;
        padding: 0rem 1.6rem 4rem;
    }
    .profile p .mt {
        display: block;
        margin-top: 14px;
    }
    .profile h1{
    	font-size: 113%;
        padding: 3.5rem 1.6rem 0.7rem;
    }
}
@media screen and (max-width:768px) {
.profile h2{
	padding:0 2rem 4rem;
}
}

p {
	font-weight:normal;
	font-size:1rem;
	margin: 2.9rem 10% 6.0rem;
    letter-spacing: 0.05em;
	text-align:center;
}
@media screen and (max-width:768px) {
p{
	font-size: 0.81rem;
    margin: 2.3rem 2% 2rem;
}
 .space p {
	margin: 2.4rem 9.3% 4.8rem !important;
}
}
 .space p{
	margin: 4.8rem 10% 9.1rem;
}
.other {
    color: #afafaf;
    line-height: 2;
    margin-top: 6rem;
    margin-bottom: 0;
}
@media screen and (max-width:768px) {
    .other {
        text-align: center;
        margin: 3.1rem 1.6rem 0;
    }
}

/*==================================================
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 3px;
}

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

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

#footer small{
     color:#333333ab;  
     font-size: 70%;
     padding-bottom:15px;
}

@media screen and (min-width:769px) {
#footer small{
     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: 21px 0 24px;
        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: 3.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);
}


/*
    container
*/
.container {
    margin: 0 auto 9.1rem;
}
/* size */
.sizeS.container { max-width: 1000px; }
.sizeM.container { max-width: 1095px; }
.sizeL.container { max-width: 1200px; }

/* width */
.w37_5p.container img { width: 37.5%; }
.w38p.container img { width: 38%; }
.w50p.container img { width: 50%; }
.w51p.container img { width: 51%; }
.w57p.container img { width: 57%; }
.w66p.container img { width: 66%; }
.w86_5p.container img { width: 86.5%; }

/* 文字寄せ */
.right.container img {
    margin: 0 0 0 auto;
    display: block;
}
.center.container img {
    margin: 0 auto;
    display: block;
}
@media screen and (max-width:1147px) {
    /* size */
    .sizeM.container.spM div {
        margin-right: 26px;
        margin-left: 26px;
    }
}
@media screen and (max-width:1052px) {
    /* size */
    .sizeS.container.spM div {
        margin-right: 26px;
        margin-left: 26px;
    }
}

@media screen and (max-width:768px) {
    .container {
        margin-bottom: 4.8rem;
    }

    /* width */
    .sp_w50p.container img { width: 50%; }
    .sp_w53_5p.container img { width: 53.5%; }
    .sp_w60p.container img { width: 60%; }
    .sp_w64p.container img { width: 64%; }
    .sp_w69p.container img { width: 69%; }
    .sp_w70p.container img { width: 70%; }
    .sp_w100p.container img { width: 100%; }

    /* 文字寄せ */
    .sp_center.container img {
        margin: 0 auto;
        display: block;
    }
}