@charset "utf-8";
/* CSS Document */

/*Googleフォントの読み込み-------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Zen+Kaku+Gothic+New&display=swap');


/*全体の設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
body {
	margin: 0;
	padding: 0px;
	color: #555;	/*全体の文字色*/
	font-family:"Montserrat", "zen-kaku-gothic-new-regular", "Kiwi Maru", "kiwi-maru-regular", sans-serif;	/*フォント種類*/
	font-size: 15px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: linear-gradient(-225deg,#e1dbec 34%, #d3ecf3 40%,  #fbe5e7 80%);	/*背景色*/
	-webkit-text-size-adjust: none;
    max-width: 100vw;	/*サイトの最大幅*/
    cursor: url("../image/cursor.png"), default;
}
/*リセットーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {max-width: 100%;}
iframe {width: 100%;}

/*リンク設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
a {
    color: #7b5979;		/*リンクテキストの色*/
	transition: 0.2s;	/*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
    text-decoration: none;    /*リンクの下線を消す*/
    cursor: url("../image/cursor2.png"), pointer;
}
a:hover {
	color: rgba(204,154,168,0.7);			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*section
---------------------------------------------------------------------------*/
section {
    position: relative;
	padding-top:80px;    /*sectionのなかの上下の余白*/
    padding-bottom: 20px;
}

/*サイトの最大幅------------------------------------------------------------*/
.container {
    max-width:3500px;
}



/*見出しの設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.container h2 {
    font-family: 'Montserrat', serif;	/*GoogleFontsの指定*/
	font-weight: bold;	/*太く*/
	font-size: 2.5em;			/*文字サイズを２倍に*/
	letter-spacing: 0.2em;	/*文字間隔を広くとる*/
	text-indent: 0.2em;		/*上の行のletter-spacingと同じ値をセットする*/
	text-align: center;
    border-bottom: dashed;
    border-bottom-color: #CC9AA8;
    padding: 1.5rem 0 1.5rem 0;
    margin-bottom: 2rem;
    color: #7b5979
}

.container h3 {
    position: relative;
    font-family: 'Montserrat', serif;	/*GoogleFontsの指定*/
	font-weight: bold;	/*太く*/
	font-size: 1.3em;			/*文字サイズを２倍に*/
	text-align: left;
    width: auto;
    padding: 1.5rem 0 1.5rem 0;
}
.container p {
    position: relative;
     font-family: "kiwi maru", sans-serif;	/*GoogleFontsの指定*/
	font-weight: normal;	/*太く*/
	font-size: 0.9em;			/*文字サイズを２倍に*/
	text-align: left;
    color: #3f3f3f;
    letter-spacing: 0.1rem;
    width: auto;
    padding-top: 0;
    padding-bottom: 0
}

.container h4{
    font-family: 'Zen Kaku Gothic New', serif;
    font-weight: 900;
    font-size: 1.5em;
    color: #7b5979;
    text-align: center;
    position: relative;
  padding: 1.5rem 2rem;
  border-bottom: 2px solid #7b5979;
  border-left: 2px solid #7b5979;
  border-radius: 0 0 0 20px;
}

h4:before {
  position: absolute;
  right: 50px;
  bottom: -21px;
  width: 0;
  height: 0;
  content: '';
  border-width: 21px 21px 0 0;
  border-style: solid;
  border-color: #7b5979 transparent transparent transparent;
}

h4:after {
  position: absolute;
  right: 54px;
  bottom: -14px;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 14px 0 0;
  border-style: solid;
  border-color: #7b5979 transparent transparent transparent;
}




/*スクロールでフェードインーーーーーーーーーーーーーーーーーーーーーー*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(50px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

.scroll_left {
  transition: 0.8s ease-in-out;
  transform: translateX(-50px);
  opacity: 0;
}
.scroll_left.on {
  transform: translateX(0);
  opacity: 1.0;
}

.scroll_right {
  transition: 0.8s ease-in-out;
  transform: translateX(50px);
  opacity: 0;
}
.scroll_right.on {
  transform: translateX(0);
  opacity: 1.0;
}



.blur{
	animation-name:blurAnime;
	animation-duration:8s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(8px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}



/*各パーツの設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/*背景の設定ーーーーーーーーーーーーーーーー*/
 
.bg1 {
    background-color: rgba(124,90,122,0.5)
}




/*トップのスライダー（6-1-3）ーーーーーーーーーーーーーーーー*/
#slider {
    position: relative;
}

/*ヘッダー設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#menubar {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100px;
    margin: auto;
    background-color: rgba(255,255,255,0.5);
    font-family: 'Montserrat', serif;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    z-index: 110;
    
}
#menubar nav {
    position: absolute; 
    top:30px;
    right: 5%;
    width: 50%;
}

#menubar ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#logo {
    width: 110px;
    margin-top: 20px;
    margin-left: 30px;
}

.head-text {
    position: absolute;
    top: 50vh;
    left: 7%;
    width: auto;
    height: auto;
    z-index: 99;
    font-family: 'Kiwi Maru', serif;	/*GoogleFontsの指定*/
    font-size: 2em;
    font-weight:lighter;
    text-shadow: 0.5px 0.5px 1px black;
    letter-spacing: 0.5rem;
    color: #fff;
    line-height: 4rem;
    text-align: center;
      
}

@media screen and (min-width:800px) {

#menubar-min {
    display: none;
}



}


/*コンテンツの幅ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.main-area {
    position: relative;
    width:60%;
    margin:0 auto;
    padding: 50px 0 ; 
  
}


/*トップのコンセプトの流体ーーーーーーーーーーーーーーーーーー*/
#top-consept {
    position: relative;
    width: 100%;
    margin: auto;
}
.consept-area {
    position: relative;
    display: flex;
    

}
.consept-img {
    width: 100%;
    
    
}

.consept-img img {
    animation: fluidrotate 30s ease 0s infinite;
    
}


.consept-area ul {
    display: flex;
    flex-direction: column;
     margin-bottom: 50px;
    justify-content: center;
    align-content: center;
}

.consept-area li-1 {
    width: 100%;
    margin: auto;
}

.consept-area .TextTyping {
    position: relative;
    text-align: center;
}

.consept-area li-2 {
    margin-top: 20px;
    width: 60%;
    margin: auto
}
.consept-area p {
     position: relative;
    vertical-align: middle;
    width: auto;
    text-align: center;
    padding-top: 50px;

    font-size: 1.2em
   
}

/*トピックス　ーーーーーーーーーーーーーーーーーーー*/

#topics{
    position: relative;
}

.topics-list{
    position: relative;
    
}

.topics-list ul {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.3);
    border-radius: 15px;
}
.topics-list li {
  margin: 0.1rem;
    padding: 1rem;
}

.topics-box {
    display: flex;
    flex-direction: column;
}
.topics-box figure {
     width: 80%;
    margin: auto;
    border-radius: 15px;
   box-shadow: 15px 15px 0px 0 rgb(60, 194, 235,0.5)
}
.topics-box img {
    position: relative;
    top: 0;
     border-radius: 15px;
}
.topics-box img:hover{
    top:10px;
    left: 10px;
    opacity: 0.8
}
.topics-box box2 {
    margin-top: 1.5rem
}
.topics-box h3 {
    text-align: center;
    padding: 0.2rem;
    margin-bottom: 2rem;
    border-bottom: dotted;
    border-bottom-color: #7b5979
}
.topics-box p {
    font-size: 15px;
    text-align: center;
}
.view-more {
    color: #CC9AA8;
    text-align: center;
    font-size: 0.9em;
    border: dotted;
    width: 10rem;
    margin: auto;
}
.view-more:hover {
    color: #7b5979;
    border-radius: 30px;
}


/*カテゴリーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー----*/

.category-list1 {
    position: relative;
}

.category-list1 ul {
    position: relative;
    display: flex;
    flex-direction: row;
}

.category-list1 li {
    width: 100%;
}
.category-list1 li2 {
    width:100%;
    margin:auto;
   
}

.category-list1 li2 h3 {
    text-align: center;
    font-size: 1.8em;
    border: dotted;
    width: 50%;
    border-radius: 50px;
    color: #b1a2c1
    
}
.category-list1 li2 p {
    font-size: 1.2em;
    margin-top: 3rem;
    text-align: left;
    width: 80%;
    border: none;
    padding-left: 3rem;
}

.category-skin {
    position: relative;
    
}

.category-skin img {
    animation: fluidrotate 30s ease 0s infinite;
    width: 80%;
    margin: 20px 0 0 50px;
	height: auto;
    z-index: 100;
    
   
}

.fluid1 {
    position: absolute;
    top:0;
    left:5px;
    width: 85%;
    height: 95%;
    z-index: -10;
    
}

/*----------------------------------------------*/

.category-list2 {
    position: relative;
}

.category-list2 ul {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
}

.category-list2 li {
    display: block;
    width: 100%;
    text-align: right;
}
.category-list2 li2 {
    width:100%;
    margin:auto;
}

.category-list2 li2 h3 {
    text-align: center;
    font-size: 1.8em;
    border: dotted;
    width: 50%;
    border-radius: 50px;
    color: #bb8dab;
     float: right;
    
}
.category-list2 li2 p {
    font-size: 1.2em;
    margin-top: 3rem;
    text-align: left;
    border: none;
    padding-right: 3rem;
    float: right;
    
}

.category-base {
    position: relative;
    
}

.category-base img {
     animation: fluidrotate 30s ease 0s infinite;
    width: 80%;
    margin: 20px 50px 0 0;
	height: auto;
    z-index: 100;
    
   
}

.fluid2 {
    position: absolute;
    top:0;
    right:5px;
    width: 85%;
    height: 95%;
    z-index: -10;
    
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


.category-list3 {
    position: relative;
}

.category-list3 ul {
    position: relative;
    display: flex;
    flex-direction: row;
}

.category-list3 li {
    width: 100%;
    
}
.category-list3 li2 {
    width:100%;
    margin:auto;
}

.category-list3 li2 h3 {
    text-align: center;
    font-size: 1.8em;
    border: dotted;
    width: 50%;
    border-radius: 50px;
    color: #cc9aa8
    
}
.category-list3 li2 p {
    font-size: 1.2em;
    margin-top: 3rem;
    text-align: left;
    width: 80%;
    border: none;
    padding-left: 3rem;
}

.category-eye {
    position: relative;
    
}

.category-eye img {
     animation: fluidrotate 30s ease 0s infinite;
    width: 80%;
    margin: 20px 0 0 50px;
	height: auto;
    z-index: 100;
    
   
}

.fluid3 {
    position: absolute;
    top:0;
    left:5px;
    width: 85%;
    height: 95%;
    z-index: -10;
    
}

/*----------------------------------------------*/

.category-list4 {
    position: relative;
}

.category-list4 ul {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
}

.category-list4 li {
    display: block;
    width: 100%;
    text-align: right;
}
.category-list4 li2 {
    width:100%;
    margin:auto;
}

.category-list4 li2 h3 {
    text-align: center;
    font-size: 1.8em;
    border: dotted;
    width: 50%;
    border-radius: 50px;
    color: #b16c90;
     float: right;
    
}
.category-list4 li2 p {
    font-size: 1.2em;
    margin-top: 3rem;
    text-align: left;
    border: none;
    float: right;
    padding-right: 3rem;
}

.category-lip {
    position: relative;
    
}

.category-lip img {
     animation: fluidrotate 30s ease 0s infinite;
    width: 80%;
    margin: 20px 50px 0 0;
	height: auto;
    z-index: 100;
    
   
}

.fluid4 {
    position: absolute;
    top:0;
    right:5px;
    width: 85%;
    height: 95%;
    z-index: -10;
    
}

.category-area li img {
    width: 80%;
    overflow:hidden;
    transition:1s all;
}

.category-area li img:hover {
  transform:scale(1.03,1.03);
  
  
}


/*ギャラリーときらきら*/



.particles-g {
    position: relative;
    margin-top: 200px;
}
#particles-js {
    position: absolute;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
}




/*フッターーーーーーーーーーーーーーーーーーーーー*/

.footer-area {
    position: relative; 
}

.footer-area table {
    width: 100%;
}

.footer-area th {
    width: 40%;
}

.footer-area td {
    padding-left: 3rem;
}

.footer-area ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.footer-area li {
    margin: 10px 0 20px 0;
}

.footer-area img {
    width: 50%;
    margin: auto;
}

.footer-area h4 {
    text-align: left;
    font-weight: bold;
}

.footer-area p {
    text-align: right;
    font-size: 0.8em;

}



/*.pagetop--icon {
    position: fixed;
    right: 30px;
    top: 30px;
    z-index: 100;
    transition: 0.6s cubic-bezier(0.63, 0, 0.33, 1);
    transform: translateX(-111px);
}

.pagetop--icon.is--show {
    transform: translateX(0px);
}

.pagetop--icon a {
    display: block;
    position: relative;
}

.pagetop--icon span {
    display: block;
    transform-origin: 0px 100%;
    transition: 0.3s;
}

.pagetop--icon span.icon--black {
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
}

.pagetop--icon span.icon--white {
    position: relative;
}

.pagetop--icon.color--black span.icon--white {
    opacity: 0;
}

.pagetop--icon.color--black span.icon--black {
    opacity: 1;
}

.pagetop--icon.color--white span.icon--white {
    opacity: 1;
}

.pagetop--icon.color--white span.icon--black {
    opacity: 0;
}*/

.backtotop--button {
    width: 150px;
    height: 150px;
    background-color: rgb(255, 255, 255,0.8);
    position: fixed;
    bottom: 50px;
    right: 100px;
    z-index: 100;
    border-radius: 100%;
    opacity: 0;
    transition: 0.6s cubic-bezier(0.63, 0, 0.33, 1);
    transform: translateY(300px);
}

.backtotop--button.is--show {
    transform: translateX(0px);
}

.backtotop--button a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.backtotop--button a:hover p.button--icon span {
    transform: scale(1.4);
}

.backtotop--button a:hover p.button--text span {
    transform: rotate(-360deg);
}

.backtotop--button p {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
}

.backtotop--button p.button--icon {
    animation: 5s cubic-bezier(0.86, -0.43, 0.26, 1.24) 0s infinite normal none running rotationPlane;
}

.backtotop--button p.button--text {
    animation: 15s linear 0s infinite reverse none running rotation;
}

.backtotop--button span {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    transition: 0.4s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.backtotop--button.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(300px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

.backtotop--button.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(300px);
  }
}


/*トップのぐるぐるーーーーーーーーーーーーーーーー*/


.rolling-icon {
    position: absolute;
    top:70vh;
    right: 150px;
    width:320px;
    animation:10s linear infinite rotation1;
}

.rolling-item {
    position: absolute;
    top:71.5vh;
    right: 172px;
    width: 280px;
}

@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}









/*画面が小さくなった時の設定ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (max-width:1450px) {
    


    .consept-area ul {
    display: flex;
    flex-direction: column;
    
}

.consept-area li-1 {
    width: 100%;
    margin: auto;
}

.consept-area .TextTyping {
    position: relative;
    text-align: center;
    
}
.consept-area li-2 {
    margin: auto;
    width: 60%;
}
.consept-area p {
    position: relative;
    vertical-align: middle;
    width: auto;
    text-align: center;
    padding-top: 50px;

    font-size: 1em
   
}




}

/*-------------------------------------*/


@media screen and (max-width:1300px) {
    
    .main-area {
        width: 80%;
        margin: auto;
    }
    .consept-area li-2 {
    margin-top: 50px;
    width: 80%;
}
    
    .topics-list ul {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.3);
    border-radius: 15px;
}
.topics-list li {
  margin: 0.1rem;
    padding: 1rem;
}

.topics-box {
    display: flex;
    flex-direction: row;
}
    
.topics-box figure {
     width: 70%;    
    }
    .topics-box box1 {
        width: 40%
    }
    .topics-box box2 {
        width: 60%;
        margin: auto;
    
    }
    
  .backtotop--button {
    width: 120px;
    height: 120px;
    background-color: rgb(255, 255, 255,0.8);
    position: fixed;
    bottom: 50px;
    right: 30px;  


}


/*ハンバーガーメニューーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (max-width:1000px) {
    #menubar {
        font-size: 15px;
    }
    
    .category-list1 ul {
   position: relative;
    display: flex;
    flex-direction: column;
}

.category-list1 li {
    width: 80%;
    margin: auto;
}
.category-list1 li2 {
     width:100%;
    margin:0 10rem 0 0;
}

.category-list1 li2 h3 {
     text-align: center;
    font-size: 1.8em;
    border: dotted;
    width: 100%;
    margin: 2rem 0 0 0;
    border-radius: 50px;
    color: #b1a2c1
    
}
.category-list1 li2 p {
    font-size: 1.2em;
    margin-top: 3rem;
    text-align: center;
    width: 85%;
    border: none;
}

 .btnlinestretches4 {
        width: auto;
       float: none;
    }
    
/*-------------------------------*/
    
    .category-list2 ul {
    position: relative;
    display: flex;
    flex-direction: column;
}

.category-list2 li {
    width: 80%;
    margin: auto;
}
.category-list2 li2 {
    width:100%;
    margin:auto;
}

.category-list2 li2 h3 {
    
    text-align: center;
    font-size: 1.8em;
    border: dotted;
    width: 100%;
    margin: 2rem 0 0 0;
    border-radius: 50px;
    color: #b1a2c1
    
}
.category-list2 li2 p {
    font-size: 1.2em;
    margin-top: 3rem;
    text-align: center;
    width: 85%;
    border: none;
}    
    
    .btnlinestretches4-2 {
        width: auto;
       float: none;
    }
    
/*-------------------------------*/    
    .category-list3 ul {
    position: relative;
    display: flex;
    flex-direction: column;
}

.category-list3 li {
    width: 80%;
    margin: auto;
}
.category-list3 li2 {
    width:100%;
    margin:auto;
}

.category-list3 li2 h3 {
    
    text-align: center;
    font-size: 1.8em;
    border: dotted;
    width: 100%;
    margin: 2rem 0 0 0;
    border-radius: 50px;
    color: #b1a2c1
    
}
.category-list3 li2 p {
    font-size: 1.2em;
    margin-top: 3rem;
    text-align: center;
    width: 85%;
    border: none;
}
    
/*-------------------------------*/ 
    
    .category-list4 ul {
    position: relative;
    display: flex;
    flex-direction: column;
}

.category-list4 li {
    width: 80%;
    margin: auto;
}
.category-list4 li2 {
    width:100%;
    margin:auto;
}

.category-list4 li2 h3 {
    
    text-align: center;
    font-size: 1.8rem;
    border: dotted;
    width: 100%;
    margin: 2rem 0 0 0;
    border-radius: 50px;
    color: #b1a2c1
    
}
.category-list4 li2 p {
    font-size: 1.2em;
    margin-top: 3rem;
    text-align: center;
    width: 85%;
    border: none;
}    
    
    .btnlinestretches4-4 {
        width: auto;
       float: none;
    }
   /*-------------------------------------*/   
   
.footer-area {
    position: relative; 
}

.footer-area table {
    width: 100%;
}

.footer-area th {
    display: block;
    width: 100%;
}

.footer-area td {
    display: block;
    width: 100%;
    margin-left: 0px;
    padding-right: 5rem;
    text-align: center;
}

.footer-area ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    justify-content: space-between;
}

.footer-area li {
    margin: 10px 0 20px 0;
}

.footer-area img {
    width: 50%;
    margin: auto;
}

.footer-area h4 {
    margin-top: 2rem;
    text-align: center;
    font-weight: bold;
}

.footer-area p {
    text-align: center;
    font-size: 0.8em;

} 
    

    .rolling-icon {
    position: absolute;
    top:70.5vh;
    right: 30px;
    width: 250px;
    animation:10s linear infinite rotation1;
   
}

.rolling-item {
    position: absolute;
    top:72vh;
    right: 53px;
    width: 210px;
    
}

    
    
    
    
    
    
    
    
}

/*----------------------------------------------*/

@media screen and (max-width:900px) {
.head-text {
    position: absolute;
    top: 50vh;
    left: 10%;
    width: auto;
    height: auto;
    z-index: 99;
    font-family: 'Kiwi Maru', serif;	/*GoogleFontsの指定*/
    font-size: 1.5em;
    font-weight:lighter;
    text-shadow: 0.5px 0.5px 1px black;
    letter-spacing: 0.5rem;
    color: #fff;
    line-height: 4rem;
    text-align: center;
      
}







}

@media screen and (max-width:800px) {
    
#menubar  {
    display: none;
    }

#menubar-min {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100px;
    margin: auto;
    background-color: rgba(255,255,255,0.5);
    font-family: 'Kiwi Maru', serif;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    z-index: 110;
    
}
#g-nav {
    position: fixed; 
    top:0px;
    right: -120%;
    width: 50%;
    height: 100vh;
    background: rgba(255,255,255,0.5)
}
    
#g-nav.panelactive {
    right: 0;

}

#menubar-min ul {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    height: 50vh;
    justify-content: space-between;
}

#logo-2 {
    width: 110px;
    margin-top: 20px;
    margin-left: 30px;
}
    
    .topbtn {
        position: absolute;
        top: 10px;
        right: 20px;
        z-index: 999;
        cursor: url("../image/cursor2.png"), pointer;
        width: 50px;
        height: 50px;
        
    }   
    
    .topbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        background-color: #7b5979;
        width: 45%
    }   
    
    .topbtn span:nth-of-type(1)  {
        top: 15px
    }
    
   .topbtn span:nth-of-type(2)  {
        top: 23px
    } 
    
    .topbtn span:nth-of-type(3)  {
        top: 31px
    }
    
    .topbtn.active span:nth-of-type(1){
        top: 18px;
        right: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%
    }
    
     .topbtn.active span:nth-of-type(2){
         opacity: 0;
    }
    
       .topbtn.active span:nth-of-type(3){
        top: 30px;
        right: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%
    }
    
    .slider-con img {
    width:55vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}
   
}



@media screen and (max-width:650px) {

body {
    font-size: 15px;
    max-width: 100vw;
    }

.head-text {
    position: absolute;
    top: 50vh;
    left: 5%;
    width: auto;
    height: auto;
    z-index: 99;
    font-family: 'Kiwi Maru', serif;	/*GoogleFontsの指定*/
    font-size: 1.2em;
    font-weight:lighter;
    text-shadow: 0.5px 0.5px 1px black;
    letter-spacing: 0.5rem;
    color: #fff;
    line-height: 4rem;
    text-align: left;
      
}
.topics-box {
    display: flex;
    flex-direction: column;
}
   
.topics-box figure {
     width: 50%;    
    }
    .topics-box box1 {
        width: 100%;
        margin-bottom: 2rem;
    }

    
 .TextTyping {
        font-size: 17px
}
 
    

}