@charset "utf-8";
/*==================================================
ニュースティッカーのためのcss
===================================*/

/*ニュース1行の周りの余白*/
.bx_title {
    width: 60%;
    margin: 0 auto;
    color: rgba(215, 0, 58, 0.60);
    border-top: 1px solid rgba(215, 0, 58, 0.60);
    padding: 0.4rem 0.6rem 0;
}

.bx-wrapper {
    background-color: rgba(255, 255, 255, 0.824);
    border-radius: 60px;
    border: none;
    width: 100%;
    /*max-width: 670px;*/
    margin: 0 auto;
    padding: 0 0 0 1.4rem;
    box-shadow: 0px 0px 32px 4px rgba(0, 0, 0, 0.1);
    max-width: 670px;
    /*border-bottom: 1px solid rgba(215, 0, 58, 0.60);*/
}

.slider a {
    display: block;
    padding: 10px 0;
    /*color: rgba(215, 0, 58, 0.75);*/
    color: #666;
    padding-left: 6px;
}

.slider li::after {
    content: '>';
    /*content: '一 覧  >';*/
    position: absolute;
    right: 2.2rem;
    bottom: 0.8rem;
    font-size: 0.8rem;;
}


/*日付*/
.slider span {
    display: inline-block;
    font-size: 0.8rem;
    margin-right: 10px;
    /*color: rgba(215, 0, 58, 0.75);*/
    color: #666;
}

/*768px以下の見た目*/
@media screen and (max-width:768px) {

    .bx-wrapper {
        width: 80%;
        max-width: 100%;
    }
    .slider span {
        display: block;
    }

    .slider li::after {
        content: '>';
        position: absolute;
        right: 1.4rem;
        bottom: 1.4rem;
    }
}
/*===========================================================*/
/*機能編  4-1-3　プログレスバー＋数字カウントアップ＋画面が開く*/
/*===========================================================*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    text-align: center;
    color: rgba(215, 0, 58, 1);
}

/* Loading画像中央配置　*/
#splash_text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);
    color: rgba(215, 0, 58, 1);
    width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg {
    height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
    background: #fff;
    /*background: rgba(215, 0, 58, 1);*/
    /*background:#017490;*/
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}

/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}

/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}

/*===========================================================*/
/*機能編  7-1-32　グラデーション線から塗に変化する*/
/*===========================================================*/

.gradient4 {
    /*ボタンの形状*/
    display: inline-block;
    padding: 10px 60px;
    margin: 20px 0 0 0;
    border-radius: 30px;
    text-decoration: none;
    border: 1px solid #fff;
    color: #fff;
    /*アニメーションの指定*/
    transition: all 0.4s ease-out;
}

#box3 .gradient4 {
    color: #925410;
    border-color: #925410;
}

/*hoverした際、グラデーションと影を付ける*/
.gradient4:hover,
#box3 .gradient4:hover {
    /*ボタンの形状*/
    border-color: transparent;
    color: #fff;
    /*背景の色と形状*/
    background: linear-gradient(270deg, #3bade3 0%, #9844b7 50%, #44ea76 100%);
    background-size: 200% auto;
    background-position: right center;
    /*ボックスの影*/
    box-shadow: 0 5px 10px rgb(250, 108, 159, 0.4);
}

/*===========================================================*/
/*機能編 6-1-3	ゆっくりズームアウトさせながら全画面で見せる*/
/*===========================================================*/
#h_inner {
    width: 100%;
    height: 600px;
    /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*===========================================================*/
/*機能編  9-6-3 リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示*/
/*===========================================================*/

.modaal-overlay {
    background: linear-gradient(45deg, rgba(88, 182, 211, .9), rgba(229, 93, 135, .9)) !important;
}


/*===========================================================*/
/*機能編  6-2-6 サムネイルをクリックするとグループ化された画像一覧を表示する*/
/*===========================================================*/

/*===モーダル表示のためのcss　*/

.hide-area {
    /*モーダル表示をする場所をあらかじめ隠す*/
    display: none;
}

.modaal-fullscreen .modaal-content-container {
    /*full画面の色設定*/
    background: linear-gradient(45deg, rgba(88, 182, 211, .9), rgba(229, 93, 135, .9));
    color: #fff;
    text-align: center;
}

.modaal-fullscreen .modaal-close {
    /*ボタンの色、位置*/
    background: none;
    right: 20px;
}

/*クローズボタンの×の色変更*/
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: #666;
}

/*キャプション*/
.caption {
    display: block;
    padding: 10px 0;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.modaal-content-container img {
    border: 5px solid #fff;
    width: 100%;
    max-width: 700px;
    height: auto;
    vertical-align: bottom;
    /*画像の下にできる余白を削除*/
}

/*===========================================================*/
/* 印象編 4 最低限おぼえておきたい動き*/
/*===========================================================*/

/*== 4-6　じわっ（ぼかしから出現） ==*/

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

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

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

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger {
    opacity: 0;
}



/*===========================================================*/
/* 印象編　8-11　テキストが1文字づつ出現*/
/*===========================================================*/

.eachTextAnime span {
    opacity: 0;
}

.eachTextAnime.appeartext span {
    animation: text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*===========================================================*/
/* 印象編　6-1　スクロールすると1画面移動*/
/*===========================================================*/
.box {
    /*padding: 40px;*/
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

/*.box-area {
    width: 50vw;
}*/

#box1 {
    background: url("/tohokuuni_women/110th/img/bg_02.jpg") no-repeat center;
    background-size: cover;
}

#box1.box {
    justify-content: flex-start;
}

@media screen and (max-width:768px) {
    #box1.box {
        justify-content: center;
    }
}


/*========= ページネーションCSS ===============*/

.pagination {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    z-index: 10;
    list-style: none;
}

.pagination a {
    display: block;
    height: 20px;
    margin-bottom: 5px;
    color: #fff;
    position: relative;
    padding: 4px;
}

.pagination a.active:after {
    box-shadow: inset 0 0 0 5px;
}

.pagination a .hover-text {
    position: absolute;
    right: 15px;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    padding-right: 15px;
}

.pagination a:hover .hover-text {
    opacity: 1;
}

.pagination a:after {
    -webkit-transition: box-shadow 0.5s ease;
    transition: box-shadow 0.5s ease;
    width: 10px;
    height: 10px;
    display: block;
    border: 1px solid;
    border-radius: 50%;
    content: '';
    position: absolute;
    margin: auto;
    top: 0;
    right: 3px;
    bottom: 0;
}

@media screen and (max-width:768px) {
    .pagination a .hover-text {
        display: none;
    }
}



/*========= レイアウトのためのCSS ===============*/


li {
    list-style-type: none;
}

.wrapper {
    position: absolute;
    /*bottom: 110px;*/
    top: 448px;
    margin-top: 2rem;
    width: 100%;
}

a {
    color: #fff;
    text-decoration: none;
}

.vegas-overlay {
    /*background: rgba(215, 0, 58, 0.75);*/
    /*background-image: linear-gradient(180deg, rgba(215, 0, 58, 0.75), rgba(215, 0, 58, 0));*/
    background: linear-gradient(180deg, #D7003A 0%, rgba(215, 0, 58, 0) 100%);
}

/*========= button========= */



.btn_01 {
    display: inline-block;
    width: 320px;
    height: 48px;
    background-color: rgba(215, 0, 58, 0.75);
    line-height: 48px;
    margin-top: 2rem;
    padding-left: 1rem; 
    position: relative;
}

/*.btn_01:hover {
    opacity: 0.6;

}*/

.btn_01::after {
    content: '';
    /*何も入れない*/
    width: 20px;
    /*画像の幅*/
    height: 20px;
    /*画像の高さ*/
    background-image: url(/tohokuuni_women/110th/img/common/arrow_c.png);
    background-size: contain;
    position: absolute;
    right: 14px;
    top: 14px;

}

.btn_01:nth-of-type(2) {
    margin-top: 0.6rem;
}

.btnshine, .btnshine2, .btnshine3 {
    /*キラッと光る基点とするためrelativeを指定*/
	position: relative;
    
    overflow: hidden;
}


/*キラッと光る*/
.btnshine2::before {
	content: '';
    /*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -75%;
    /*キラッと光る形状*/
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(202, 168, 70, 0.75) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
}


/*キラッと光る*/
.btnshine::before {
	content: '';
    /*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -75%;
    /*キラッと光る形状*/
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(215, 0, 58, 0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
}


/*hoverした際の移動のアニメーション*/
.btnshine:hover::before, .btnshine2:hover::before, .btnshine3:hover::before {
	animation: shine 1s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

.btn_02 {
    width: 452px;
    height: 120px;
    border: 1px solid #fff;
    background-color: rgba(215, 0, 58, 0.75);
}

.btn_03 {
    width: 146px;
    height: 146px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(215, 0, 58, 0.75);
    transform: rotate(45deg);
}

.btn_03:hover {
    transform: rotate(360deg);
    /* 回転 */
    transition: 1.8s;
}