@charset "utf-8";
/* CSS Document  ea#8x@2h@FJg6-J  https://lpeg.info/webworks/instagram_embed.html */


@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body ,p h1, h2, h3, h4, h5, li, ol {
/*	font-family: 'Noto Sans Japanese', Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;*/
font-family:  font-family: 'Noto Sans Japanese', serif ,Meiryo,Arial, Helvetica, sans-serif;
}
/* 設定 */
#category img{
   width: 100%;
}
/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 50%; float: left;}
/* 2 columns */
.grid-item--width2 { width: 100%; }

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

  .grid-item { width: 25%; float: left;}
  /* 2 columns */
  .grid-item--width2 { width: 50%; }

 }


.text-white{
  color: #ffffff;
}

/* 基本装飾 */
#header{
  height: 70px;
}
@media screen and (max-width:769px){

    #header{
      height: 55px;
      background-color: rgba(255,255,255,0.5);
    }

 }


header {
  padding: .5rem;
  text-align: right;
}
a {
  color: #E8C472;
  text-decoration: none;
  white-space: nowrap;
}
li {
   list-style: none;
  margin: 0;
}

/* ボタン */
.btn-menu {
  border: 1px solid #999;
  /*background: transparent;*/
  background-color: #001e43;
  color: #fff;
  padding: .5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  position: absolute;
  right: 10px;
  z-index: 3;
}
@media screen and (max-width:769px){

.btn-menu {
  border: 1px solid #999;
  /*background: transparent;*/
  background-color: #001e43;
  color: #fff;
  padding: .1.25rem 0.5rem;
  font-size: 0.5rem;
  cursor: pointer;
  line-height: 1;
  position: absolute;
  right: 10px;
  z-index: 3;
}
}


#hamburger .btn-gNav{
  position: fixed;
  top: 15px;
  left: 10px;
  width: 30px;
  height: 24px;
  z-index: 3;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

#hamburger .btn-gNav span{
  position: absolute;
  width: 100%;
  height: 4px;
  background: #848484;
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}
#hamburger .btn-gNav span:nth-child(1) {
  top:0;
}
#hamburger .btn-gNav span:nth-child(2) {
  top:10px;
}
#hamburger .btn-gNav span:nth-child(3) {
  top:20px;
}
#hamburger .btn-gNav.open span:nth-child(1){
  background: #fff;
  top: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
#hamburger .btn-gNav.open span:nth-child(2),#hamburger .btn-gNav.open span:nth-child(3){
  top: 6px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}
#gNav{
  position: fixed;
  top: 0;
  left: -200%;
  width: 100%;
  height: 100%;
  background: lightgray;
  font-size: 16px;
  box-sizing: border-box;
  z-index: 2;
  padding-top: 50px;
  transition: .3s;
}
#gNav.open{
  left: 0px;
}
#gNav .gNav-menu{
  width: 100%;
  height:100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  /*justify-content: center;*/
}
#gNav .gNav-menu li{
  display: block;
  padding : 20px 30px;
}
#gNav .gNav-menu li a{
  color: #195367;
  text-decoration: none;
}


@media screen and (min-width: 991px){
  .btn-gNav{
    display: none;
  }
  #gNav{
    position: fixed;
    top: 0;
    right: 0;
    height: 50px;
    background: none;
  }
  #gNav .gNav-menu{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 40px;
    position: fixed;
    top: 15px;
    right: 0;
    padding-left: 50px;
  }
  #gNav .gNav-menu li{
    padding-top: 5px;
  }
}

/* ▼ PC/SP表示非表示 */
.pc {
  display: block !important; }

.sp {
  display: none !important; }

@media screen and (max-width:769px){
  .pc {
    display: none !important; }

  .sp {
    display: block !important; } }
/* ▲ PC/SP表示非表示 */



.wrapper{
  position: relative;
}

.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;

}
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
 
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}


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

  h2, .h2 {
      font-size: 1.25rem !important;
  }

 }


.effect-fade {
  background-color: rgba(255,255,255,0.8);
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 300ms;
}

.effect-fade.effect-scroll {
  background-color: rgba(255,255,255,0.8);
　opacity : 1;
　transform : translate(0, 0);
}

.effect-small {
  /*background-color: rgba(255,255,255,0.8);*/
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 300ms;
}

.effect-small.effect-scrollsmall {
  background-color: rgba(255,255,255,0.8);
　opacity : 1;
　transform : translate(0, 0);
}

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

  .effect-fade {
    background-color: rgba(255,255,255,0);
  　opacity : 0;
  　transform : translate(0, 45px);
  　transition : all 300ms;
  }

 }



/* KV*/
.kv-bg{
  background-image: url('../images/kv-bg.png');
  background-size: cover;
}

.kv-mybo{
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.kv-mybo-area{
  padding: 5% 0 10% 0;
}

.kv-logo-area{
  padding: 12% 0 0 0;
}

.kv{
  font-size: 30px !important;
}
@media screen and (max-width:769px){
    .kv{
      font-size: 22px !important;
    }
}

#right-nav{
  width: 20%;
  position: absolute;
  right: 0;
  top: 0;
}

.kv-ico{
  width: 20%; 
  margint: 10%;
}

.logo{
  width: 82px;
  background-color: rgba(0, 0, 0, 0) !important;
}

.cart{
  height: 38px;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0) !important;
    border: 1px solid rgba(0, 0, 0, 0) !important;
}


.heading_lead {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  text-align: center;
  padding-bottom: 10px;
  color: #195367;
  line-height: 160%;
}
@media screen and (max-width:769px){
  .heading_lead {
    font-size: 16px !important;
  }

 }
.heading_lead::before,
.heading_lead::after {
  content: '';
  width: 3px;
  height: 80px;
  background-color: #195367;
}
@media screen and (max-width:769px){
  .heading_lead::before,
  .heading_lead::after {
    width: 4px;
    height: 60px;
  }
}

.heading_lead::before {
  margin-right: 30px;
  transform: rotate(-30deg)
}
.heading_lead::after {
  margin-left: 30px;
  transform: rotate(30deg)
}
@media screen and (max-width:769px){
  .heading_lead::before {
    margin-right: 30px;
    transform: rotate(-25deg)
  }
  .heading_lead::after {
    margin-left: 30px;
    transform: rotate(25deg)
  }
}

.top-view{
  font-size : 16px;
  line-height : 29px;
  letter-spacing : 0.28px;
  color : #D5A395;
  color : rgb(213, 163, 149);

}

.top-msg{
  font-size : 25px;
  line-height : 29px;
  letter-spacing : 0.49px;
  color : #4B8096;
  color : rgb(75, 128, 150);
}
.top-msg span{
  font-size : 20px;
}

.top-box{
  width: 70px;
  height: auto;
}
/* メニュー */
nav {
  background: #001e43;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  overflow-x: hidden;
  text-align: center;
  width: 0;
  transition: .8s;
}
/* メニューを開いた時 */
nav.open-menu {
  width: 25%;
  min-width: 300px;
}
.nav{
   padding-top: 10px;
}

#kv{
    position: relative;
}
.scroll{
    position: absolute;
    bottom: 20px;
    width: 3%;
    height: auto;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: flash 4s linear infinite;
}

@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes goDown {
  100% {
    top: 200px;
  }
}

@keyframes goDown {
  100% {
    top: 50px;
  }
}

.goDown {
  width:  100%;
  height: auto;
  position: relative;
  left: 0px;
  top: 0;

  animation-name: goDown;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@media screen and (max-width:769px){
  .scroll{
      position: absolute;
      bottom: 30%;
      width: 8%;
      height: auto;
      bottom: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: flash 4s linear infinite;
  }
  .goDown {
    width:  100%;
    height: auto;
    position: relative;
    left: 0px;
    top: 0;

    animation-name: goDown;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
  }
}




.img_wrap{
/*  border: 1px solid #ddd;
  width: 300px;
  height: 226px;
  margin: 20px auto 0;*/
  transition-duration: 0.5s;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
}
.img_wrap:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}


#infomation h3{
  font-size: 1.4rem;
}
@media screen and (max-width:769px){

#infomation h3{
  font-size: 1.1rem;
}

 }

.infomation-img_wrap{
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.infomation-img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.5s;
}
.infomation-img_wrap img:hover{
  transform: scale(1.2) rotate(9deg);
  transition-duration: 0.5s;
}

.info-item{
  padding: 4% 0 4% 4%;
  width: 96%;
  font-size: 105%;
}


.row-eq-height {
    display: flex;
    flex-wrap: wrap;
    font-size: 20px;
}


.bg1{
  background-color: #CFDDE9;
  margin-top: -1px;
}

.headline1
{
  font-size : 18px;
  line-height : 26px;
  color : #185366;
  color : rgb(24, 83, 102);
}
.word
{
  font-size : 14px;
  line-height : 30px;
  color : #4D4D4D;
  color : rgb(77, 77, 77);
}

.aj{
  width: 38%;
}

.bg2{
  background-color: #FFF1E5;
}

.lead1{
 color: #F8AF5A;
 font-size: 13px;
}

h2{
  color: #185366;
  margin-bottom: 0;
}
.about{
  width:60%;
  margin: 0 auto;
}
@media screen and (max-width:769px){
  .about{
    width:90%;
    margin: 0 auto;
    margin-bottom: 1em;
  }
}
.abot-text{
  font-size : 13px;
  line-height : 30px;
  color : #4D4D4D;
  color : rgb(77, 77, 77);
  line-heihjn: 20px;
}
.title-about{
  width: 100%;
}
@media screen and (max-width:769px){
/*  .title-about{
    max-width: 250px;
    text-align: center;
  }*/
}
#about-comment li {
    list-style: none;
    margin: 0;
      font-size: 12px;
  line-height: 16px;
  text-align: left;
}

.step-box{
  background : #FFFFFF;
  background : rgba(255, 255, 255, 1);
  opacity : 0.81;
  border-radius : 10px;
  -moz-border-radius : 10px;
  -webkit-border-radius : 10px;
  filter: alpha(opacity=81) progid:DXImageTransform.Microsoft.Alpha(opacity=81) ;
}

@media screen and (max-width:769px){
  .step-box{
    margin: 1em;
  }
}
.step-image{
  max-height: 90px;
}
@media screen and (max-width:991px){
  .step-image{
    max-height: 60px;
  }
}

.step-image-icon{
  height: 200px;
}
.step-inner{
  padding:1em 1em 0.25em 1em;
}

.flow5{
  width:150px ;
}

.step-sub{
  background : #E8C472;
  background : rgba(232, 196, 114, 0.25);
  border-radius : 16px;
  -moz-border-radius : 16px;
  -webkit-border-radius : 16px;
  filter: alpha(opacity=14) progid:DXImageTransform.Microsoft.Alpha(opacity=14) ;
  margin-bottom: 14px;
}
.step-pink-mybo{
  height: 80px;
  margin-top: 1em;
}
.flow-title
{
  font-size : 15px;
  line-height : 40px;
  letter-spacing : 0.75px;
  color : #E8C472;
  color : rgb(232, 196, 114);
}
.flow-comment
{
  font-size : 14px;
  line-height : 20px;
  letter-spacing : 0.6px;
  color : #185366;
  color : rgb(24, 83, 102);
}

.cloudstars{
  font-weight : bold;
  font-size : 24px;
  line-height : 33px;
  color : #185366;

}

.user-box
{
  background-image : url(../images/user-box.png);
  /*CSS に参照される画像を作成するには、「選択した CSS を書き出し」コマンドを使用します。*/
  background-repeat : no-repeat;
  opacity : 0.75;
  filter: alpha(opacity=75) progid:DXImageTransform.Microsoft.Alpha(opacity=75) ;
}
@media screen and (max-width:769px){
  .user-box  {
    background-repeat : repeat;
    min-height:80vh ;
    padding: 1.5em 1.5em 2.5em 1.5em;
  }
}
.line-pink{
  border-left: solid 40px #D5A395;
  border-right: solid 40px #D5A395;
  box-sizing: border-box;
  width: 100%;

}
@media screen and (max-width:769px){
  .line-pink-sp{
      border-left: none;
      border-right: none;
      box-shadow: inset 5px 0px 1px rgba(213,163,149,.5),
            inset -5px 0px 1px rgba(213,163,149,.5);


  }
}
.line-blue{
  border-top: solid 40px #CFDDE9;
  width: 100%;

}
.line-blue-b{
  border-bottom: solid 40px #CFDDE9;
  width: 100%;

}

@media screen and (max-width:769px){
  .line-blue-sp{
      border-left: none;
      border-right: none;
      box-shadow: inset 0px 5px 1px rgba(207,221,233,.9),
            inset -0px -5px 1px rgba(207,221,233,.9);

  }
  }
  .line-blue-b{
    border-bottom: solid 40px #CFDDE9;
    width: 100%;

  }
}
.slick-content-box{
  padding: 0.5em;
}

.user-item{
  margin:  0 0 0 2em;
}
@media screen and (max-width:769px){
  .user-item{
    margin:  0 ;
  }
}

.user-title{
  font-size : 21px;
  line-height : 40px;
  letter-spacing : 2.15px;
  color : #4D4D4D;
  color : rgb(77, 77, 77);
}

.users-text{
  font-size : 16px;
  line-height : 26px;
  color : #4D4D4D;
  color : rgb(77, 77, 77);
}


.bg-seibun{
  background-image: url('../images/bg-seibun.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}



.siryou
{
  font-size : 16px;
  line-height : 18px;
  letter-spacing : 0.28px;
  color : #D5A395;
  color : rgb(213, 163, 149);
}


/* ---------------------------------------------------------
youtube
----------------------------------------------------------*/

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------
DOT
----------------------------------------------------------*/
@keyframes pulseMotion {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
    background-color: rgba(170, 143, 123, 0.4)
  }
  100% {
    transform: translate(-50%, -50%) scale(2, 2);
    background-color: rgba(170, 143, 123, 0)
  }
}

.inner {
  display: flex;
  justify-content: center;
}

.point {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0 20px;
  background-color: #ccc;
  border-radius: 50%;
  transition: background-color cubic-bezier(0.215, 0.61, 0.355, 1) .4s;
  cursor: pointer;
}

.point.-active {
  background-color: #aa8f7b;
}

.point.:focus {
  outline: none;
}

.point:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: opacity linear 0.4s;
  content: '';
}

.point.-active:after {
  animation: pulseMotion 1.4s linear infinite;
}


/* ---------------------------------------------------------
SVG
----------------------------------------------------------*/
.wrapper-rerative{
  position: relative;
  clear: both;
}
.inner-absolute{
  position: absolute;
 bottom: 30%;
  width: 100%;
}
@media screen and (max-width:769px){
  .inner-absolute{
    bottom: 0;
  }
}
.wrapper-rerative-btn{
  position: relative;
  margin-top: -6%;
}
.inner-absolute-btn{
  position: absolute;
 bottom: 20%;
  width: 100%;
}
.path-0{
  animation:pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  }
  @keyframes pathAnim-0{
    0%{
      d: path("M 0,500 C 0,500 0,250 0,250 C 46.70508100147276,282.4309646539028 93.41016200294553,314.86192930780555 159,335 C 224.58983799705447,355.13807069219445 309.0644329896907,362.9832474226804 368,341 C 426.9355670103093,319.0167525773196 460.3321060382916,267.20508100147276 509,229 C 557.6678939617084,190.79491899852724 621.6071428571428,166.19642857142853 700,193 C 778.3928571428572,219.80357142857147 871.2393225331369,298.00920471281296 933,310 C 994.7606774668631,321.99079528718704 1025.4355670103093,267.7667525773196 1073,242 C 1120.5644329896907,216.2332474226804 1185.018409425626,218.9237849779087 1249,225 C 1312.981590574374,231.0762150220913 1376.490795287187,240.53810751104567 1440,250 C 1440,250 1440,500 1440,500 Z");
      }
    25%{
      d: path("M 0,500 C 0,500 0,250 0,250 C 70.40408689248898,233.7612297496318 140.80817378497795,217.5224594992636 198,236 C 255.19182621502205,254.4775405007364 299.1713917525772,307.67139175257734 352,330 C 404.8286082474228,352.32860824742266 466.5062592047128,343.7919734904271 522,305 C 577.4937407952872,266.2080265095729 626.8035714285713,197.1607142857143 690,198 C 753.1964285714287,198.8392857142857 830.2794550810016,269.5651693667158 906,268 C 981.7205449189984,266.4348306332842 1056.0786082474226,192.57860824742266 1110,195 C 1163.9213917525774,197.42139175257734 1197.406111929308,276.1203976435935 1249,298 C 1300.593888070692,319.8796023564065 1370.2969440353459,284.93980117820325 1440,250 C 1440,250 1440,500 1440,500 Z");
      }
    50%{
      d: path("M 0,500 C 0,500 0,250 0,250 C 48.7512886597938,276.7945508100147 97.5025773195876,303.58910162002945 158,296 C 218.4974226804124,288.41089837997055 290.7409793814433,246.43814432989691 357,243 C 423.2590206185567,239.56185567010309 483.5335051546392,274.65832106038295 540,299 C 596.4664948453608,323.34167893961705 649.125,336.92857142857144 702,342 C 754.875,347.07142857142856 807.9664948453608,343.62739322533133 872,324 C 936.0335051546392,304.37260677466867 1011.0090206185566,268.5618556701031 1071,263 C 1130.9909793814434,257.4381443298969 1175.9974226804125,282.12518409425627 1235,285 C 1294.0025773195875,287.87481590574373 1367.0012886597938,268.93740795287187 1440,250 C 1440,250 1440,500 1440,500 Z");
      }
    75%{
    d: path("M 0,500 C 0,500 0,250 0,250 C 39.8321060382916,296.57731958762884 79.6642120765832,343.1546391752577 152,317 C 224.3357879234168,290.8453608247423 329.1752577319588,191.95876288659795 387,192 C 444.8247422680412,192.04123711340205 455.6347569955817,291.0103092783505 512,323 C 568.3652430044183,354.9896907216495 670.2857142857142,320 749,296 C 827.7142857142858,272 883.2223858615611,258.9896907216495 928,232 C 972.7776141384389,205.0103092783505 1006.8247422680411,164.04123711340202 1069,187 C 1131.175257731959,209.95876288659798 1221.4786450662739,296.8453608247423 1288,318 C 1354.5213549337261,339.1546391752577 1397.260677466863,294.57731958762884 1440,250 C 1440,250 1440,500 1440,500 Z");
      }
    100%{
      d: path("M 0,500 C 0,500 0,250 0,250 C 46.70508100147276,282.4309646539028 93.41016200294553,314.86192930780555 159,335 C 224.58983799705447,355.13807069219445 309.0644329896907,362.9832474226804 368,341 C 426.9355670103093,319.0167525773196 460.3321060382916,267.20508100147276 509,229 C 557.6678939617084,190.79491899852724 621.6071428571428,166.19642857142853 700,193 C 778.3928571428572,219.80357142857147 871.2393225331369,298.00920471281296 933,310 C 994.7606774668631,321.99079528718704 1025.4355670103093,267.7667525773196 1073,242 C 1120.5644329896907,216.2332474226804 1185.018409425626,218.9237849779087 1249,225 C 1312.981590574374,231.0762150220913 1376.490795287187,240.53810751104567 1440,250 C 1440,250 1440,500 1440,500 Z");
      }
}



          .path-1{
            animation:pathAnim-0 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-0{
            0%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 65.80357142857143,231.6706553755523 131.60714285714286,213.34131075110457 191,239 C 250.39285714285714,264.6586892488954 303.37499999999994,334.3054123711341 358,337 C 412.62500000000006,339.6945876288659 468.8928571428572,275.4370397643594 535,277 C 601.1071428571428,278.5629602356406 677.0535714285713,345.94642857142856 744,327 C 810.9464285714287,308.05357142857144 868.8928571428572,202.7772459499264 914,185 C 959.1071428571428,167.2227540500736 991.375,236.94458762886592 1049,280 C 1106.625,323.0554123711341 1189.607142857143,339.44440353460976 1259,330 C 1328.392857142857,320.55559646539024 1384.1964285714284,285.2777982326951 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
            25%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 48.0081001472754,213.9322533136966 96.0162002945508,177.86450662739324 154,174 C 211.9837997054492,170.13549337260676 279.9432989690722,198.47422680412367 354,208 C 428.0567010309278,217.52577319587633 508.2106038291605,208.23858615611198 561,238 C 613.7893961708395,267.761413843888 639.2142857142858,336.57142857142856 701,314 C 762.7857142857142,291.42857142857144 860.9322533136966,177.47569955817377 930,174 C 999.0677466863034,170.52430044182623 1039.0567010309278,277.5257731958763 1091,300 C 1142.9432989690722,322.4742268041237 1206.840942562592,260.42120765832107 1267,238 C 1327.159057437408,215.57879234167893 1383.5795287187038,232.78939617083947 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
            50%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 56.105854197349046,298.4438512518409 112.21170839469809,346.88770250368185 178,328 C 243.7882916053019,309.11229749631815 319.2590206185567,222.8930412371134 383,197 C 446.7409793814433,171.1069587628866 498.7522091310751,205.54013254786446 558,217 C 617.2477908689249,228.45986745213554 683.7321428571429,216.9464285714286 741,247 C 798.2678571428571,277.0535714285714 846.3192194403534,348.6741531664212 903,330 C 959.6807805596466,311.3258468335788 1024.9909793814434,202.35695876288656 1090,183 C 1155.0090206185566,163.64304123711344 1219.7168630338733,233.89801178203243 1278,260 C 1336.2831369661267,286.1019882179676 1388.1415684830633,268.0509941089838 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
            75%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 64.38604565537555,233.7337997054492 128.7720913107511,217.4675994108984 186,238 C 243.2279086892489,258.5324005891016 293.2976804123711,315.86340206185565 355,299 C 416.7023195876289,282.13659793814435 490.0371870397644,191.07879234167893 551,188 C 611.9628129602356,184.92120765832107 660.5535714285716,269.82142857142856 713,295 C 765.4464285714284,320.17857142857144 821.7485272459498,285.63549337260673 880,265 C 938.2514727540502,244.36450662739327 998.4523195876288,237.63659793814435 1056,251 C 1113.5476804123712,264.36340206185565 1168.4421944035348,297.81811487481593 1232,301 C 1295.5578055964652,304.18188512518407 1367.7789027982326,277.09094256259203 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
            100%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 65.80357142857143,231.6706553755523 131.60714285714286,213.34131075110457 191,239 C 250.39285714285714,264.6586892488954 303.37499999999994,334.3054123711341 358,337 C 412.62500000000006,339.6945876288659 468.8928571428572,275.4370397643594 535,277 C 601.1071428571428,278.5629602356406 677.0535714285713,345.94642857142856 744,327 C 810.9464285714287,308.05357142857144 868.8928571428572,202.7772459499264 914,185 C 959.1071428571428,167.2227540500736 991.375,236.94458762886592 1049,280 C 1106.625,323.0554123711341 1189.607142857143,339.44440353460976 1259,330 C 1328.392857142857,320.55559646539024 1384.1964285714284,285.2777982326951 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
          }

          .path-3{
            animation:pathAnim-0 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-0{
            0%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 65.80357142857143,231.6706553755523 131.60714285714286,213.34131075110457 191,239 C 250.39285714285714,264.6586892488954 303.37499999999994,334.3054123711341 358,337 C 412.62500000000006,339.6945876288659 468.8928571428572,275.4370397643594 535,277 C 601.1071428571428,278.5629602356406 677.0535714285713,345.94642857142856 744,327 C 810.9464285714287,308.05357142857144 868.8928571428572,202.7772459499264 914,185 C 959.1071428571428,167.2227540500736 991.375,236.94458762886592 1049,280 C 1106.625,323.0554123711341 1189.607142857143,339.44440353460976 1259,330 C 1328.392857142857,320.55559646539024 1384.1964285714284,285.2777982326951 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
            25%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 48.0081001472754,213.9322533136966 96.0162002945508,177.86450662739324 154,174 C 211.9837997054492,170.13549337260676 279.9432989690722,198.47422680412367 354,208 C 428.0567010309278,217.52577319587633 508.2106038291605,208.23858615611198 561,238 C 613.7893961708395,267.761413843888 639.2142857142858,336.57142857142856 701,314 C 762.7857142857142,291.42857142857144 860.9322533136966,177.47569955817377 930,174 C 999.0677466863034,170.52430044182623 1039.0567010309278,277.5257731958763 1091,300 C 1142.9432989690722,322.4742268041237 1206.840942562592,260.42120765832107 1267,238 C 1327.159057437408,215.57879234167893 1383.5795287187038,232.78939617083947 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
            50%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 56.105854197349046,298.4438512518409 112.21170839469809,346.88770250368185 178,328 C 243.7882916053019,309.11229749631815 319.2590206185567,222.8930412371134 383,197 C 446.7409793814433,171.1069587628866 498.7522091310751,205.54013254786446 558,217 C 617.2477908689249,228.45986745213554 683.7321428571429,216.9464285714286 741,247 C 798.2678571428571,277.0535714285714 846.3192194403534,348.6741531664212 903,330 C 959.6807805596466,311.3258468335788 1024.9909793814434,202.35695876288656 1090,183 C 1155.0090206185566,163.64304123711344 1219.7168630338733,233.89801178203243 1278,260 C 1336.2831369661267,286.1019882179676 1388.1415684830633,268.0509941089838 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
            75%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 64.38604565537555,233.7337997054492 128.7720913107511,217.4675994108984 186,238 C 243.2279086892489,258.5324005891016 293.2976804123711,315.86340206185565 355,299 C 416.7023195876289,282.13659793814435 490.0371870397644,191.07879234167893 551,188 C 611.9628129602356,184.92120765832107 660.5535714285716,269.82142857142856 713,295 C 765.4464285714284,320.17857142857144 821.7485272459498,285.63549337260673 880,265 C 938.2514727540502,244.36450662739327 998.4523195876288,237.63659793814435 1056,251 C 1113.5476804123712,264.36340206185565 1168.4421944035348,297.81811487481593 1232,301 C 1295.5578055964652,304.18188512518407 1367.7789027982326,277.09094256259203 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
            100%{
              d: path("M 0,500 C 0,500 0,250 0,250 C 65.80357142857143,231.6706553755523 131.60714285714286,213.34131075110457 191,239 C 250.39285714285714,264.6586892488954 303.37499999999994,334.3054123711341 358,337 C 412.62500000000006,339.6945876288659 468.8928571428572,275.4370397643594 535,277 C 601.1071428571428,278.5629602356406 677.0535714285713,345.94642857142856 744,327 C 810.9464285714287,308.05357142857144 868.8928571428572,202.7772459499264 914,185 C 959.1071428571428,167.2227540500736 991.375,236.94458762886592 1049,280 C 1106.625,323.0554123711341 1189.607142857143,339.44440353460976 1259,330 C 1328.392857142857,320.55559646539024 1384.1964285714284,285.2777982326951 1440,250 C 1440,250 1440,500 1440,500 Z");
            }
          }



.bg3{
  background-color: #E9E9E9;
}
.f-sns-ico{
  width: 30px;
  margin-left: 30px;
}


.hedline-style{
  margin-top:2em;
}

.contents-box{
  padding-top: 4em;
  padding-bottom: 5em;
}

#footer{
  margin-bottom: -70px;
}


/*========= スクロール途中からヘッダーの高さが小さくなるためのCSS ===============*/
#right-nav{
    /*はじめの高さを設定*/
  height: auto;
  width:20%;
   /*以下はレイアウトのためのCSS*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:none;
  text-align: center;
}

/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#right-nav.HeightMin{
  position: fixed;
    z-index: 999;/*最前面へ*/
  width: 15%;
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-170px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.g-link{
  transition: box-shadow 1s ease-out, transform 1s ease-out;
  box-shadow: 0 7px 5px 3px rgba(0, 0, 0, 0);
}
.g-link:hover {
  box-shadow: 0 7px 5px 3px rgba(0, 0, 0, 0.45);
  transform: translateY(-8px);
}



.cmgn{
  padding-top: 3em !important;
  padding-bottom: 3rem !important;
}
.pc-mt-5{
  padding-top: 3em !important;
}
@media screen and (max-width:769px){
  .pc-mt-5{
    padding-top: 0 !important;
  }
}

.line-tomodachi{
  width: 90%;
  margin: 5%;
}

/* ---------------------------------------------------------
エフェクト
----------------------------------------------------------*/
.fluffy {
  animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
/* ---------------------------------------------------------
INSTAGRAM
----------------------------------------------------------*/
/*************************************************************************
　　    Label Collection
*************************************************************************/

.LabelCollection {
  max-width: 100%;
  padding: 0 20px;
  }
.LabelCollection .innerBox {
  max-width:none;
width:100%;
  margin: 0 auto 37.333vw auto;
  }
.LabelCollection .innerBox{
  position:relative;
  max-width: 67.692vw;
  margin: 0 auto 10.7692vw auto;
  }

.LabelCollection ul{
  max-width:67.692vw;
  justify-content:space-around;
  display: flex;
  flex-wrap:wrap;
  padding:0;
  margin:0 auto;
  }

.LabelCollection ul li{
  overflow:hidden;
  border-radius:0.769vw;
  margin-bottom:1.538vw;
  }

.LabelCollection ul li,
.LabelCollection ul li a:link img{
  width:15.385vw;
  height:15.385vw;
  transition: .3s all;
  }

.LabelCollection ul li a:hover img{
  width:18.462vw;
  height:18.462vw;
  margin:-1.538vw 0 0 -1.538vw;
  transition: .3s all;
  }

@media screen and (max-width: 991px){
	.LabelCollection ul li,
	.LabelCollection ul li a:link img{
	  width:20.385vw;
	  height:20.385vw;
	  transition: .3s all;
	  }

}
.followme{
  width:11.538vw;
  height:2.308vw;
  background:url('../images/f-instagram.png') no-repeat 9.2308vw 0;
  background-size:2.308vw 2.308vw;
  overflow:hidden;
  display: flex;
  position:absolute;
  align-items: center;
  right: 0.6vw;
  font-family:"Quicksand";
  text-align: left; 
  color: #474747;
  }

.followme span{
  display:inline-block;
  transition: .3s all;
  margin-left:0.769vw;
  }

.followme:hover{
  animation: bgiLoop 1s linear infinite;
  }

@keyframes bgiLoop {
    0% { background-size: 2.308vw 2.308vw;}
  50% { background-size: 0px 2.308vw; background-position:10.385vw;}
  100% { background-size: 2.308vw 2.308vw;}
}

.followme:hover span{
  margin-left:1.154vw;
  transition: .3s all;
  }




/* ---------------------------------------------------------
レイアウト確認用　（テストが終わったら消すかコメント）
----------------------------------------------------------*/
.test1 {
  box-shadow: 0 0 0 10px #000 inset;
}
.test2 {
  box-shadow: 0 0 0 10px red inset;
}
.test3 {
  box-shadow: 0 0 0 10px blue inset;
}
.test4 {
  box-shadow: 0 0 0 10px pink inset;
}


/*
row {

}
.row .row {
  margin-top: 5px;
  margin-bottom: 0;
}
[class*="col-"] {

  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  box-shadow: 0 0 0 1px rgba(86,61,124,.2)inset;
}
*/
.ccontainer-fluid{
  background-color: #fefefe;
}
.ccontainer{
  background-color: lightpink;
}