/* -----全体の共通設定----- */
* {
    margin: 0;
    padding: 0;
}
html {
    overflow: auto;

}
body {
    font-family: 'Noto Sans JP', sans-serif;
    overflow: hidden;

}

#container {
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;

}

img{
    max-width: 100%;

}

a{
    display: block;
    text-decoration: none;
    margin-left:auto;
}

/* ---------背景色--------- */
.bk-color1 {
    background-color: #F2F8F9;
}

.bk-color2 {
    background-color: #FFF;
}

/* リストマーカーの設定一応残しておく */
.under-marker {
    background: linear-gradient(transparent 70%, #e79299 0%);
    display: block;
    height: 6px;
    border-radius: 3px;
    /* padding-top: -13%; */
  
}

/*マーカーアニメーション*/
 
.marker-animation.active{
    background-position: -100% 1.1em;
}
 
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(231,146,153,0.8) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(231,146,153,0.8) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(231,146,153,0.8) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(231,146,153,0.8) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(231,146,153,0.8) 50%);
    background-repeat: repeat-x;
    background-size: 200% .3em;
    background-position: 0 1.1em;
    transition: all 1s ease;
}

/* .under-marker::after {
    content: "";
    display: inline;
    width: 100%;
    height: 0.3em;
    border-radius: 0.15em;
    bottom: 3%;
    position: absolute;
    left: 0;
    background-color: rgba(231,146,153,0.8);
    background: linear-gradient(transparent 70%, #e79299 0%);

} */

/* 配色さんたち */
.pink {
    color:#e79299;
}

.indigo-night1 {
    color:#304681;
}

.indigo-night2 {
    color: #063656;
}

.cyan {
    color: #53b4CA;
}

.black {
    color:#222;
}

.white {
    color: #FFF;
}


/* アンダーラインさん */
.under-line4 {
    border-bottom: solid 0.1rem #53b4CA;
}

.under-line5 {
    margin-top: 33px;
    border-bottom: solid 1px #222;
    width: 100%;
}

.under-line5-setting {
    display: block !important;

}

@media only screen and (max-width: 767px) {
    .under-line5-setting { display: none !important; }
}

.under-line6 {
    border-bottom: solid 3px #53b4CA;
}


/* ボタンの設定 */
.btn-big:hover {
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;

}


/* ---画像切り替え設定---*/
.img-pc {
    display: block !important;

}

.img-sp {
    display: none !important;

}
@media only screen and (max-width: 767px) {
    .img-pc { display: none !important; }
    .img-sp { display: block !important; }
}

/*---改行設定----*/
/*スマートフォンでは有効*/
.kaigyo1{
    display: block;
}

@media screen and (max-width:767px) {
    .kaigyo1{
        display: none;
    }
}

/*PCでは有効*/
.kaigyo2{
    display: none;
}

@media screen and (max-width:767px) {
    .kaigyo2{
        display: block;
    }
}

/* ---コンテンツ表示切り替え設定--- */
/* PCとSPで表示コンテンツを切り替える */
.switching1 {
    display: block !important;

}
.switching2 {
    display: none !important;
}

@media only screen and (max-width: 767px) {
    .switching1 { display: none !important; }
    .switching2 { display: block !important; }
}

/* 画像を大きくする処理 */
.img-bigger {
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
  }
  .img-bigger img {
    height: auto;
    transition: transform .6s ease;/* ゆっくり変化させる */
  }
  .img-bigger:hover img {
    transform: scale(1.2);/* 拡大 */
  }