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

    
html,body{
    width: 100%;
    height: 100%;
    font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    }

body{
    position: relative;
}

.bg-navy{
    background-color: #101c80;
}

/* -------------------------------- */
/*かたまり
/* -------------------------------- */
    
.boxwrap{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url("../images/testbg.jpg");
    background-size: cover;
    background-position: center;
    position: fixed;
    z-index: -100;
    }
    
#c01{
 position: relative;
 background: rgba(255,255,255,0.95);
 top: 100vh;
 padding: 15vh 0px 0px 0px;
}
    
#c02{
 position: relative;
 background: #699BD2;
 top: 100vh;
 padding: 15vh 0px 0px 0px;
 color: #fff;
}

    
#news li{
padding-top: 0.5em;
border-bottom: 1px dotted #101c80;
    }


footer{
    background: url('../images/footer.svg');
    background-size: cover;
    min-height: 150px;
    position: relative;
    padding-bottom: 60px
}
    
#artist01_wrap, #artist02_wrap{
    /*background: url('../images/bg_artist.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;*/
}

.aw{
    background: url('../images/bg_artist02.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
    
.content{
    background: #fff;
}

.bg-white {
  background-color: #fff;
  padding: 30px; }

.artist_wrap{
    background: url('../images/bg_artist.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* -------------------------------- */
/* テキスト周り等
/* -------------------------------- */
h1,h2{
  font-family: "Amatic SC", cursive;
    margin: 0;
    padding: 0;
}

h1{
    margin-top: 0.5em;
}
    
h2{
    color: #101c80;
    font-size: 3rem;
}

.title {
  text-align: center;
  color: white;
  letter-spacing: .4em;
  font-size: 1.2em;
}
    
.a_name, .artist_info{
    background: #101c80;
    color: #fff;
    font-weight: bold;
    font-size: 1.4em;
    padding: 10px;
    box-shadow: 3px 3px 0 1px rgba(255,245,82,0.7);
}

.artist_info{
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
      -webkit-tap-highlight-color: transparent;
      transition: .3s ease-out;
}

.artist_info:hover{
    cursor: pointer;
	 text-decoration: none;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.12), 0 3px 20px 0 rgba(0,0,0,0.12), 0 5px 6px -2px rgba(0,0,0,0.2);
}




.navbar-toggler{
    font-size: 1.7em;
}

.collapse{
    background: #002047;
}


/* -------------------------------- */
/* 飾り
/* -------------------------------- */
.img_border{
    width: 100%;
    height: 10px;
    background: url('../images/line.svg');
    background-size: contain;
    background-repeat: repeat;
}

.status{
    border: 2px solid #101c80;
    padding: 1em;
    border-radius: 5px;
    background: url("../images/bg_intro.jpg") repeat;
}

.a_photo{
    border: 2px solid #101c80;
}


/* -------------------------------- */
/* メニュー・ボタン
/* -------------------------------- */
#menu{
    background: rgba(40,54,122,0.90);
}

#menu span{
    background: none;
}

footer div a{
    display: block;
}

#return img{
    border-radius: 2px;
    background: rgba(13,29,97,0.80);
}
    
    



/* -------------------------------- */
/* トップイメージ周り
/* -------------------------------- */
.st0{fill:#FF6D74;}
.st1{fill:#4b9e8c;}
.st2{fill:#ffd308;}

.hide{
    display: none;
}
    
.out{
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.box {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #ee88aa, rgba(221, 238, 255, 0) 80%, rgba(255, 255, 255, 0.5));
  /*z-index: 11;*/
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.wave {
  opacity: .6;
  position: absolute;
  top: -40%;
  left: -30%;
  background: #5787CD;
  width: 2000px;
  height: 2000px;
  -webkit-transform-origin: 50% 48%;
          transform-origin: 50% 48%;
  border-radius: 46%;
  -webkit-animation: drift 20s infinite linear;
          animation: drift 20s infinite linear;
}

.wave.-layer3 {
  -webkit-animation: drift 15s infinite linear;
          animation: drift 15s infinite linear;
  opacity: .8;
  background: #101c80;
  border-radius: 48%;
}

.wave.-layer2 {
  -webkit-animation: drift 24s infinite linear;
          animation: drift 24s infinite linear;
  opacity: .3;
  background: #FEB3E0;

}


@-webkit-keyframes drift {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes drift {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
    
.logo{
    display: block;
    max-width: 180px;
    max-height: 180px;
    margin-top: 30vh;
    }
    
path#sitename {
    fill: none;
    stroke: #fff;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: 1;
    -webkit-animation: sitename 3s ease-in forwards;
    animation: sitename 3s ease-in forwards;
}
    @-webkit-keyframes sitename {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#fff;
}
}
@keyframes sitename {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#fff;
}
}


/* -------------------------------- */
/* スライド
/* -------------------------------- */
.slide{
    height: 170px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
.slide div{
    display: inline-flex;
    }

.slide a .img-thumbnail.slidethum{
    background-image: url('../images/yoshidamikako/italy/italy_01.JPG');
    background-size: cover;
    background-position: center;
    width: 150px;
    height: 150px
    }