@charset "UTF-8";



/*ーーーーーーーーーーーーーーーーーーーーーーーー
css reset
ーーーーーーーーーーーーーーーーーーーーーーーー*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0;
}
table{
border-collapse:collapse;border-spacing:0;
}
fieldset,img{ border:0; }
address,caption,cite,code,dfn,em,strong,th,var{
font-style:normal;font-weight:normal;
}
li { list-style:none; } caption,th{ text-align:left; }
h1,h2,h3,h4,h5,h6{
font-size:100%;
}
q:before,q:after{ content:''; }
abbr,acronym{ border:0;font-variant:normal; }
sup{ vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit; }
input,textarea,select{ *font-size:100%; }
legend{ color:#000; }
img { vertical-align:middle; }



/* ーーーーーーーーーーーーーーーーーーーーーーーー
カスタムプロパティ
ーーーーーーーーーーーーーーーーーーーーーーーー */

:root {
  --font-san: "ヒラギノ角ゴシック",
    "Hiragino Kaku Gothic",
    "Hiragino Sans",
    "游ゴシック",
    "Yu Gothic",
    "Arial",
    sans-serif;
  --font-min: "ヒラギノ明朝",
    "Hiragino Mincho",
    "游明朝",
    "Yu Mincho",
    "MS 明朝",
    "MS Mincho",
    serif;
  --bg-grapink: linear-gradient(to right, #ee1faf 5%, #eb553d 50%, #f4ae3f 95%);
  --bg-grablue: linear-gradient(to right, #9461FE 5%, #5A88EE 50%, #1EAFDE 95%);
  --keyv-mt: 40px;
}




/*ーーーーーーーーーーーーーーーーーーーーーーーー
フォント
ーーーーーーーーーーーーーーーーーーーーーーーー*/

body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,dt,dd,li,
table,th,td,
form,select,option,input,
address,pre,strong,em,iframe {
font-family: var(--font-san);
font-weight: 400;
font-size:16px;
}



		@media screen and (max-width:743px) {
		body,
		h1,h2,h3,h4,h5,h6,
		p,ul,ol,dl,dt,dd,li,
		table,th,td,
		form,select,option,input,
		address,pre,strong,em,iframe {
		font-size:14px;
		font-weight: 300;
		}
		/*smp end*/}





/*行間設定
ーーーーーーーーーーーーーーーーーーーーーーーー*/

h1,h2,h3,h4,h5,h6 {
line-height:1.4;
}
p,th,td,caption,
ul,ol,li,
dl,dt,dd {
line-height:1.8;
}
		@media screen and (max-width:743px) {
		h1,h2,h3,h4,h5,h6 {
		line-height:1.3;
		}
		p,th,td,caption,
		ul,ol,li,
		dl,dt,dd {
		line-height:1.5;
		}
		/*smp end*/}



/*ーーーーーーーーーーーーーーーーーーーーーーーー
リンク
ーーーーーーーーーーーーーーーーーーーーーーーー*/

a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #000;
}



/*iPad調整用
ーーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (min-width:744px) {
body {min-width:1220px;}
}

img {
max-width:100%;
height:auto;
}


/* 全体
ーーーーーーーーーーーーーーーーーーーーーーーー */

body {
background-image: url(/promotion/myfavoritespace/common/img/body_bg.jpg);
background-repeat: repeat-y;
background-position: center top;
background-size: cover;
}





/* キービジュアル
ーーーーーーーーーーーーーーーーーーーーーーーー */

#keyv {
position: relative;
width: 1130px;
height: 940px;
margin: 0 auto;
margin-top: -60px;
}
		@media screen and (max-width:743px) {
		#keyv {
		width: 100%;
		height: calc(460px + var(--keyv-mt));
		margin-top: 0px;
		overflow: hidden;
		}
		/*smp end*/}


/* 見出し */
#keyv h1 {
font-size: 38px;
font-weight: 700;
letter-spacing: -1px;
color: #fff;
line-height: 1.3;
position: absolute;
z-index: 5;
top: 395px;
left: 110px;
}
		@media screen and (max-width:743px) {
		#keyv h1 {
		font-size: 18px;
		top: calc(190px + 40px);
		left: 10px;
		}
		/*smp end*/}


/* 雲 */
#keyv p:nth-child(2) {
position: absolute;
z-index: 1;
top: 55px;
right: 30px;
width: 409px;
height: 282px;
}
#keyv p:nth-child(3) {
position: absolute;
z-index: 2;
top: 315px;
right: 0px;
width: 413px;
height: 374px;
}
#keyv p:nth-child(4) {
position: absolute;
z-index: 1;
top: 640px;
right: 120px;
width: 434px;
height: 262px;
}
#keyv p:nth-child(5) {
position: absolute;
z-index: 1;
top: 65px;
left: 10px;
width: 379px;
height: 352px;
}
#keyv p:nth-child(6) {/* h1が乗る雲だけ前面配置 */
position: absolute;
z-index: 3;
top: 300px;
left:0px;
width: 368px;
height: 319px;
}
#keyv p:nth-child(7) {
position: absolute;
z-index: 1;
top: 500px;
left: 80px;
width: 460px;
height: 419px;
}

		@media screen and (max-width:743px) {
		#keyv p:nth-child(2) {
		top: calc(0px + var(--keyv-mt));
		right: -50px;
		width: 190px;
		height: 131px;
		}
		#keyv p:nth-child(3) {
		top: calc(170px + var(--keyv-mt));
		right: -50px;
		width: 191px;
		height: 173px;
		}
		#keyv p:nth-child(4) {
		top: calc(300px + var(--keyv-mt));
		right: 0px;
		width: 201px;
		height: 121px;
		}
		#keyv p:nth-child(5) {
		top: calc(-30px + var(--keyv-mt));
		left: -40px;
		width: 163px;
		height: 172px;
		z-index: 3;
		transform: rotate(45deg);
		}
		#keyv p:nth-child(6) {/* h1が乗る雲だけ前面配置 */
		top: calc(150px + var(--keyv-mt));
		left:-30px;
		width: 160px;
		height: 139px;
		}
		#keyv p:nth-child(7) {
		top: calc(250px + var(--keyv-mt));
		left: -50px;
		width: 213px;
		height: 194px;
		}
		/*smp end*/}




/* イラスト */
#keyv picture {
position: absolute;
z-index: 2;
top: 0px;
left: calc(50% - 439px);
width: 878px;
height: 836px;
}
		@media screen and (max-width:743px) {
		#keyv picture {
		top: calc(10px + var(--keyv-mt));
		left: calc(50% - 200px);
		width: auto;
		height: auto;
		overflow: hidden;
		}
		#keyv picture img {
		width: 400px;
		max-width: initial;
		height: auto;
}
		/*smp end*/}


/* 画像文字 */

#keyv p:nth-child(9) {
position: absolute;
z-index: 4;
top: 175px;
right: 165px;
width: 84px;
height: 179px;
}

#keyv p:nth-child(10) {
position: absolute;
z-index: 4;
top: 145px;
left: 120px;
width: 155px;
height: 151px;
}

#keyv p:nth-child(11) {
position: absolute;
z-index: 4;
top: 725px;
left: 440px;
width: 370px;
height: 119px;
}

		@media screen and (max-width:743px) {
		#keyv p:nth-child(9) {
		top: calc(10px + var(--keyv-mt));
		right: 15px;
		width: 10.4%;/* 39px */
		height: 21.8%;/* 82px */
		}

		#keyv p:nth-child(10) {
		top: calc(85px + var(--keyv-mt));
		left: 20px;
		width: 18.4%;/* 69px */
		height: 18.1%;/* 68px */
		}

		#keyv p:nth-child(11) {
		top: calc(360px + var(--keyv-mt));
		left: 140px;
		width: 44%;/* 165px */
		height: 14.4%;/* 54px */
		}
		/*smp end*/}



/* キービジュアルスクロール
ーーーーーーーーーーーーーーーーーーーーーーーー */

#keyv_scroll {
max-width: 1600px;
margin: 0 auto;
position: relative;
z-index: 99;
}
#keyv_scroll a {
display: inline-block;
position: absolute;
top: -180px;
right: 40px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
font-size: 14px;
font-weight: 600;
padding: 5px;
display: flex;
align-items: center;
width: 120px;
}

#keyv_scroll a span {
overflow: hidden;
display: block;
width: 50px;
height: 2px;
margin-left: 5px;
position: relative;
}

#keyv_scroll a span::after {
position: absolute;
display: inline-block;
content: "";
bottom: 0;
width: 50px;
height: 2px;
background: #000;
animation: border-extend 2s infinite;
}
@keyframes border-extend {
    0% {
        left: -50px;
    }
    50% {
        left: 0px;
    }
    100% {
        left: 100px;
    }
}

		@media screen and (max-width:743px) {
		#keyv_scroll a {
		font-size: 12px;
		}
		#keyv_scroll a {
		top: -100px;
		right: -47px;
		}
		/*smp end*/}