@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; }

strong {
	font-weight: bold;
}

p{
	font-weight:normal;
	font-size:1rem;
	margin:3.0rem 20% 6.0rem;
	letter-spacing:1px;
	line-height: 1.8;
}
@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:50%;
}
@media screen and (max-width:768px) {
.container1 {
	margin-bottom:3rem;
}
.container1 img{
	width:84%;
}
}
/*==================================================
.container2 縦長中央
===================================*/
.container2 {
	margin-bottom:10rem;
	text-align:center;
}
.container2 img{
	width:80%;
}
@media screen and (max-width:768px) {
.container2 {
	margin-bottom:3rem;
}
.container2 img{
	width:84%;
}
}
/*==================================================
.container3 アンバランス
===================================*/
.container3 {
	margin-bottom:10rem;
	overflow: hidden;
	margin: 0 auto 10rem;
}
.container3 img{
	width:40%;
	margin:0px 10px;
	float: left;
}
.container3 p{
	width: 45%;
    text-align: left;
    margin: 5rem 3rem 6.0rem;
    float: left;
}

@media screen and (max-width:768px) {
.container3 {
	width: 84%;
    float: none;
    margin: 1rem 2rem 4rem;
    }
.container3 img{
	width:100%;
	margin-left:0%;
	float: none;
}
.container3 p{
	width:auto;
	text-align:left;
	margin:1rem;
	float: none;
}
}




/*==================================================
.container4 画面2分割
===================================*/
.container-all {
	width: 80%;
	margin: 0 auto;
	overflow: hidden;
}
@media screen and (max-width:768px) {
.container-all {
/*	width: 100%; */
	margin: 0 auto;
}
}

.container4 {
	float: left;
    width: 45%;
    margin: 4rem 1.7rem;
}
.container4 img{
	width:100%;
	text-align:center;
}
.container4 p {
	text-align:center;
	font-size: .8em;
	margin: 2.0rem 5% 3.0rem;
}
@media screen and (max-width:425px) {
.container4 {
	float: none;
	width: 90%;
	margin: 4rem auto;
}
}
@media screen and (max-width:768px) {
.container4 {
	float: none;
	width: 80%;
	margin: 4rem auto;
}
.container4 img{
	margin-left:0;
}
}
/*==================================================
.container5 画面2分割
===================================*/
.container5 {
	float: left;
	width: 42%;
	margin: 3rem 2rem;
}
.container5 img{
	width:100%;
	text-align:center;
}
.container5 p {



	text-align:center;
	font-size: .7em;
	margin: 2.0rem 5% 3.0rem;
}
.container5 p strong {
	font-size: 1.2em;
}
@media screen and (max-width:768px) {
.container5 {
	margin-bottom:5rem;
	float: none;
	width: 81%;
	margin: 2rem 3rem 5rem 3.5rem;
}
.container5 img{
	margin-left: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%;
}



.header strong {
	 font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	 font-weight: bold;
	 font-size: 18px;
	 display: block;
	 text-align: center;
	 padding: 4rem 0 2rem;
 }


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

strong.flash {
  animation: flash 1s linear infinite;
  font-size: 1.5em !important;
  font-weight: bold;
}
@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


/*==================================================
animation
===================================*/
.container {
  overflow: hidden;
}

.inner-block {
  width: 600px;
  margin: 0 auto;
  position:relative;
}


.fade-img-box,
.fade-img-box02 {
  width: 500px;
  height: 600px;
  margin: 10px auto;
  position:relative;
}

.fade-img-box img,
.fade-img-box02 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit:cover;
}

@media screen and (max-width:425px) {
.inner-block {
  width: 425px;
  margin: 0 auto;
text-align: -webkit-center;
text-align: center;
}
.fade-img-box,
.fade-img-box02 {
	width: 300px;
    height: 430px;
    margin: 0 63px;
}
}


@media screen and (max-width:375px) {
.inner-block {
  width: 375px;
  margin: 0 auto;
text-align: -webkit-center;
text-align: center;
}
.fade-img-box,
.fade-img-box02 {
	width: 250px;
    height: 380px;
    margin: 0 auto;
}
}




.map01 {
	position: absolute;
    top: 23%;
    left: 25%;
}
.map02 {
	position: absolute;
    top: 74%;
    left: 40%;
}
.map03 {
    position: absolute;
    top: 26%;
    right: 45%;
}
@media screen and (max-width: 1024px) {
.cloth01 {
	width: 84%;
}

.cloth02 {
	width: 84%;
}
.circle01,
.circle02,
.circle03 {
	width: 190%;
}
}




@media screen and (max-width:425px) {
.cloth01 {
	width: 84%;
}

.cloth02 {
	width: 84%;
}
}

@media screen and (min-width:768px) {
.cloth01 {
	width: 84%;
}

.cloth02 {
	width: 84%;
}
}

.circle02,.circle03 {
  animation: rotate_anime 15s linear;
  }
@keyframes rotate_anime {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.circle01 {
  animation: rotate_anime 30s linear;
  }
@keyframes rotate_anime {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@media screen and (max-width:425px) {
.circle01,
.circle02,
.circle03 {
	width: 84%;
}

.map01 {
	position: absolute;
	top: 20%;
    left: 18%;
}
.map02 {
	position: absolute;
	top: 330px;
    left: 38%;
}
.map03 {
    position: absolute;
    top: 24%;
    right: 26%;
}
}
@media screen and (max-width:768px) {
.circle01,
.circle02,
.circle03 {
	width: 100%;
}

.map01 {
	position: absolute;
	top: 24%;
    left: 25%;
}
.map02 {
	position: absolute;
	top: 76%;
    left: 40%;
}
.map03 {
    position: absolute;
    top: 28%;
    right: 40%;
}
}


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

#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 10px;   
}

#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;
    }
}


/*==================================================
bshop
===================================*/
.container2 img{
        width:40%;
}
@media screen and (max-width:768px) {
.container2 img{
        width:65%;
}
}
.container2 p{
	font-weight:normal;
	font-size:1rem;
	margin:3.0rem 20% 6.0rem;
	letter-spacing:1px;
	line-height: 1.8;
}
@media screen and (max-width:768px) {
.container2 p{
	font-size:0.7rem;
	margin:1rem 5% 2rem;
}