@charset "UTF-8";
/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-size: 100%;font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.6;scroll-behavior: smooth;
	}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ outline: none; }
input, textarea
{ border-radius: 0; }
input[type="button"],input[type="submit"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll; width: 100%; }
body { text-align: center;width: 100%; 
}

/* ======================================== */


a:link { color: #0040ff; text-decoration:none;}
a:visited { color: #00b4f6; }
a:hover { color: #a40411; }
a:active { color: #fdd705; }


/* !contents
---------------------------------------------------------- */
#contents {	
	margin: 0 auto; position:relative;
	width: 100%;
	padding:0;
	text-align:left;
}

#contents:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}


header#head{
padding:0; width:100%; height:auto;display:flex; align-items:flex-start;
flex-direction: column; padding: 0;
position:relative;aspect-ratio: 1 / 0.22;
}

div.head-box{
 width:100%; height:auto; position:relative ;
display:flex; align-items:flex-start;justify-content:flex-start;border-bottom: 2px #e01a4b solid; overflow: hidden;
}

.sparkle-box { 
  position: absolute;
  overflow: hidden;
top: 0; left: 0;width:100%; height:100%;
}

.sparkle {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 8px;

  background: radial-gradient(circle, #fff 0%, #fcf09f 40%, #ffa500 100%);
  border-radius: 50%;
 
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  pointer-events: none;
  opacity: 0;
  
 
  animation: fall linear infinite, shimmer 2s ease-in-out infinite;
}


@keyframes fall {
  0% {
    top: -10%;
    transform: translateX(0) scale(1);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    top: 110%;

    transform: translateX(50px) scale(0.5);
    opacity: 0;
  }
}


@keyframes shimmer {
  0%, 100% { opacity: 0.8; transform: scale(1); filter: brightness(1); }
  50% { opacity: 1; transform: scale(1.3); filter: brightness(1.5); }
}

/* それぞれの粒に個性を持たせる（位置・速度・遅延） */
.sparkle:nth-child(1) { left: 5%;  animation-duration: 8s, 2s;  animation-delay: -1s, 0s; }
.sparkle:nth-child(2) { left: 20%; animation-duration: 11s, 1.5s; animation-delay: -5s, 0.5s; }
.sparkle:nth-child(3) { left: 35%; animation-duration: 7s, 2.5s;  animation-delay: -3s, 1s; }
.sparkle:nth-child(4) { left: 50%; animation-duration: 10s, 2s;  animation-delay: -7s, 0.2s; }
.sparkle:nth-child(5) { left: 65%; animation-duration: 9s, 1.8s;  animation-delay: -2s, 0.7s; }
.sparkle:nth-child(6) { left: 80%; animation-duration: 12s, 2.2s; animation-delay: -6s, 1.2s; }
.sparkle:nth-of-type(7) { left: 90%; animation-duration: 8s, 1.7s;  animation-delay: -4s, 0.4s; }
.sparkle:nth-of-type(8) { left: 25%; animation-duration: 13s, 2.8s; animation-delay: -8s, 0.9s; }

.header_logo{ width: 20%; position: absolute; top: 5px; left: 5px;}
.header_logo img { max-width: 100%; height: auto; vertical-align: top; }

.top-title-box { width: 100%; height: auto; margin: auto;}
.top-title-box img { max-width: 100%; height: auto; vertical-align: top; 
}
div.head-box .present-shosai-btn{ position: absolute; left: 80%; top: 0;
}
div.head-box .present-shosai-btn:hover{  
}

div.top-title{ height: auto; position: absolute;
width: clamp(300px, 28vw, 600px);
  animation: zoomIn; 
  animation-duration: 2s;transition: all 0.3s ease-out;
  top: calc(50% - 13vh); 
  transform: translatey(-50%); 
  left: calc(50% - 5vw); 
  transform: translateX(-50%); 
}


div.top-title img{width:100%; max-width:510px;  height: auto;
}

.present_btn {
  display: inline-block;
  margin:2rem 0.5rem;

  animation: swing; 
  animation-duration: 5s; 
  animation-iteration-count:20;
}

.sky-container {
    position: absolute; left: 0; top: 0;
    width: 100%;
    height: 380px; 
    overflow: hidden;
}


.cloud-wrapper {
    position: absolute;
    top: 0; /* 初期表示の高さ */
    left: 0;
    /* 右から左へのアニメーションを適用 */
    /* linear:一定速度, infinite:無限ループ */
    animation: moveLeft 30s linear infinite;
    will-change: transform; /* パフォーマンス最適化 */
}

/* 雲の画像自体（ここで上下のふわふわを担当） */
.cloud-image {
    width: auto;
    height: auto;
    display: block;
    /* 上下のふわふわアニメーションを適用 */
    /* ease-in-out:滑らかに, alternate:行ったり来たり */
    animation: floating 4s ease-in-out infinite alternate;
}

/* 雲1の設定 */
.cloud1 {
    top: 3%; /* 少し高い位置 */
    /* アニメーション時間を短くして少し速く */
    animation-duration: 35s;
}
.cloud1 .cloud-image {
    width: 150px; /* 画像サイズ指定 */
    opacity: 0.9;
}

/* 雲2の設定 */
.cloud2 {
    top: 10%; /* 少し低い位置 */
    /* アニメーション時間を長くしてゆっくりに */
    animation-duration: 50s;
    /* 開始時間をずらす */
    animation-delay: -15s;
}
.cloud2 .cloud-image {
    width: 100px; /* 少し小さく */
    opacity: 0.7; /* 少し薄く */
    /* ふわふわの速度も少し変える */
    animation-duration: 5s;
}
 
/* 1. 右から左へ移動するアニメーション */
@keyframes moveLeft {
    0% {
        transform: translateX(110vw); /* 画面の右外側からスタート */
    }
    100% {
        transform: translateX(-150%); /* 画面の左外側へフレームアウト */
    }
}

/* 2. 上下にふわふわ揺れるアニメーション */
@keyframes floating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* 20px上に上がる */
    }
}



ul.sub-menu{ width: 50%; margin: auto; 
display:flex;justify-content:center;align-items:center; 
color: #ef2d74; font-size: 140%; 
margin-bottom: 40px; background-color: #fdc0e9;
box-shadow: 1px 12px 0px -3px #eea4d8;
 }
ul.sub-menu li{ width: 10%; text-align: center;font-family: 'Noto Sans JP', sans-serif; font-weight: 800; position: relative; }
.sub-menu-icon01{position: absolute; left: 0;top: -46px;
}
.sub-menu-icon02{position: absolute; right: -40px;bottom: -60px; }

a.white-link:LINK { color:#d80f1e; text-decoration:none; display: block; padding: 15px;  }
a.white-link:VISITED { color:white; text-decoration:none; }
a.white-link:ACTIVE { color:yellow; text-decoration:none; }
a.white-link:HOVER { color:white; text-decoration:none; background-color: #d80f1e;}




.fadein {
  display: none;
}

.head-box-mob{ display: none;}
p.header-discrip{ width: 90%; float: left; padding:20px ; background-color: #fedbf3; }

.br-sp {display:none ; }
.br-pc {display: block; }


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

header#head{ width: 100%; height:auto; margin-bottom:0; overflow:hidden; background-image: none;aspect-ratio: 1 / 0.68;border: 1px orange solid;}
div.head-box{ display: none;}
.head-box-mob{width: 100%; height: auto; display: block;margin-bottom: 0;
}
.head-box-mob img{ width: 100%; height: auto; vertical-align: top;}

.present-joho-bt{ background-color: #f888bd; color: #750c87; text-align: center; padding: 10px 0;   font-weight: bold;}

.blink { display: block; width: 100%; margin: auto;
border: 1px #750c87 dashed;border-radius: 4px;
padding: 3px 10px;
	animation: shakeY; 
  transition: all 0.3s ease-out;
  animation-duration: 15s; 
  animation-iteration-count:20;
}


ul.sub-menu{ position: fixed; right: 0; top:34vw; width: 38px;display:flex;justify-content:center;align-items:center; flex-direction: column;   color: #fff; font-size: 100%; margin-bottom: 40px;}
ul.sub-menu li{ width: 100%; margin:3px 0 ;  text-align: center;}

a.white-link:LINK { color:white; text-decoration:none; display: block; padding: 10px;  }
a.white-link:HOVER {  text-decoration:none; color:white; text-decoration:none; background-color: #d80f1e;}


.sub-moyo-li{ display: none; }
}

@media screen and (min-width:1201px) and (max-width:1620px){

}




/* For iPad */
@media screen and (min-width:768px) and (max-width:1200px){

header#head{
padding:0; width:100%; height:auto;display:flex; align-items:flex-start;
flex-direction: column; padding: 0;
position:relative;aspect-ratio: 1 / 0.29;
margin-bottom: 30px;
}

div.top-title{
  top: calc(50% - 9vh); 
  transform: translatey(-50%); 
  left: calc(50% - 5vw); 
  transform: translateX(-50%); 
}

.present-shosai-btn{ width: 20%; position: absolute; left: 70vw; top: 1vh; z-index: 2; }
.present-shosai-btn img{ width: 100%; height: auto; }

ul.sub-menu{ width: 100%; margin: auto; display:flex; flex-direction: row; justify-content:center;align-items:center; color: #fff; font-size: 140%; margin-bottom: 40px; }
ul.sub-menu li{ width: 10%; text-align: center;font-family: 'Noto Sans JP', sans-serif; font-weight: 800; position: relative; }

.cloud1 .cloud-image {
    width: 80px; /* 画像サイズ指定 */
    opacity: 0.9;
}
.cloud2 .cloud-image {
    width: 50px; /* 少し小さく */
    opacity: 0.7; /* 少し薄く */
    /* ふわふわの速度も少し変える */
    animation-duration: 5s;
}

}

/* For iPad rotate */
@media screen and (max-width:1620px) and (orientation: landscape){

}

@media screen and (min-width:950px) and (max-width:1619px){
header#head{
padding:0; width:100%; height:auto;display:flex; align-items:flex-start;
flex-direction: column; padding: 0;
position:relative;aspect-ratio: 1 / 0.234; 
}

div.head-box{
 width:100%; height:auto; 
display:flex; align-items:flex-start;justify-content:flex-start;aspect-ratio: 1 / 0.22;
}

.present-shosai-btn{ width: 18%; position: absolute; left: 70vw; top: 3vh; z-index: 2; }
.present-shosai-btn img{ width: 100%; height: auto; }

ul.sub-menu{ width: 60%; margin: auto; display:flex;justify-content:center;align-items:center;  color: #fff; font-size: 140%; margin-bottom: 40px; }
ul.sub-menu li{ width: 10%; text-align: center;font-family: 'Noto Sans JP', sans-serif; font-weight: 800; position: relative; }

.cloud1 .cloud-image {
    width: 80px; /* 画像サイズ指定 */
    opacity: 0.9;
}
.cloud2 .cloud-image {
    width: 50px; /* 少し小さく */
    opacity: 0.7; /* 少し薄く */
    /* ふわふわの速度も少し変える */
    animation-duration: 5s;
}

}

/* nandemonai size */
@media screen and (min-width:1620px) and (max-width:1920px){
.present-shosai-btn{ width: 20%; position: absolute; left: 76vw; top: 2vh; z-index: 2; }
.present-shosai-btn img{ width: 100%; height: auto; }



}

/* ======================================== */

#main { 
	margin:20px 0 0 0; padding:30px 20px;
	width: 100%; height:auto;
		
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:space-around;
}

#main:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}


.buttonz-box{width: 100%; height:auto; margin:auto;
    display:flex;
    flex-direction:row;	
    flex-wrap:wrap;	
    justify-content:space-around;
}


/* Button Styles */
ul.buttonList {
    display:flex;
    flex-direction:row;	
    flex-wrap:wrap;	
    justify-content:space-around;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    margin-bottom: 100px;
    list-style-type: none;
  }
  ul.buttonList li {
    width: auto;
    float: left;
    padding: 0.2%;
    box-sizing: border-box;
    text-align: center;
  }
  
.artist-button { text-align: left;
  display:flex; flex-direction: column;
  align-items:center;
    width: 208px; height: 240px; position: relative;
    padding: 8px 8px 12px 8px; margin: 5px;
    border: 1px solid #e8c788; color:#fff !important;
    background: rgb(252,220,139);
    background: linear-gradient(129deg, rgba(255,233,145,1) 0%, rgba(233,69,69,1) 100%);
transition: all 0.2s ease-out 0s;
    box-shadow: 0 3px 5px rgb(172 209 166 / 50%);
  }
.artist-button:hover, .button:focus {
    text-decoration: none;
    color: #fff !important;border: 1px solid yellow;
  }
.artist-button:link {
   font-weight: bold;
  }

.art-icon{ width: 98%; height: auto; margin: auto;
 box-sizing:border-box;
}
.artist-button:hover img {
	opacity: 0.4;
}

.btn01-txt{ font-size:140%; line-height:1.2;}
.btn02-txt{ font-size:120%; line-height:1;}
.btn03-txt{ font-size:110%; line-height:1;}
.btn06-txt{ font-size:100%; line-height:1.5;}
.btn04-txt{ font-size:90%; line-height:1.5;}
.btn05-txt{ font-size:80%; line-height:1;}

@media screen and (max-width: 767px) {
.btn01-txt{ font-size:110%; line-height:1.2;}
.btn02-txt{ font-size:100%; line-height:1;}
}


.box-up{ width: 100%; height: 30px; background-image: url(../images/present-box-upr.png); background-repeat: repeat-x; }
.box-und{ width: 100%; height: 31px; background-image: url(../images/present-box-undr.png); background-repeat: repeat-x; }

div.present-box{
	width: 100%; height: 900px; padding: 0; margin: auto; 
 position: relative;
  display:flex;	flex-direction: column;
  align-items : center;
  justify-content:center;

    background: linear-gradient(45deg, #fff7ed 25%, transparent 25%, transparent 75%, #fff7ed 75%), linear-gradient(45deg, #fff7ed 25%, transparent 25%, transparent 75%, #fff7ed 75%);
    background-size: 80px 80px;
    background-position: 0 0, 40px 40px;
    background-color: #f9dce2;
    }

.present-inner{ 
  width: 80%;
  height: auto;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }

.prezent-tit{ width: 100%; margin: auto; text-align: center; }
.prezent-tit img{ max-width: 100%; height: auto;}
span.title-icon{color: #cf000d; font-size: 60px; display: inline; position: relative;}
.title-icon::before {
    content: "";
    display: inline-block;
    width: 93px;
    height: 128px; 
    background-image: url('../images/present-bg-kadomatsu01.png');
    background-position: 0 10px;
    background-repeat: no-repeat;
}
.title-icon::after {
    content: "";
    display: inline-block;
    width: 93px;
    height: 128px; 
    background-image: url('../images/present-bg-kadomatsu02.png');
    background-position: 0 10px;
    background-repeat: no-repeat;
}

.pre-copy{ text-align:left; position:relative;
width:70%; margin: auto; 
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
}
.pre-copy h3{ font-size: 150%; font-family: 'M PLUS 1p', sans-serif; font-weight: 800;}
.pre-copy p{ margin-bottom: 10px;font-family: 'M PLUS 1p', sans-serif;transform: rotate(0.05deg);}

.present-matsu{ position: absolute; top: 50px; right: 50px;
  animation: swing; 
  animation-duration: 5s; 
  animation-iteration-count:20;}
.present-mochi{position: absolute; bottom: 20px; left: 50px;
  animation: swing; 
  animation-duration: 3s; 
  animation-iteration-count:10;}


.sikisi-sample{width:100%;margin-top: 20px;}
.sikisi-sample img{width:100%; }

div.btn-box{ width: 100%; text-align: center; padding: 60px 30px 30px 30px; }

button.mail-mag-btn {width: 60%; margin: auto;font-family: 'M PLUS 1p', sans-serif; position: relative;  font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem);text-shadow: 2px 1px #333;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none; 
  border-radius: 20px;
  border: 1px #ef2d74 solid;
  background: #e94563;
  background: linear-gradient(180deg, #ffe991 0%, #e94563 70%);  

  -webkit-transition: all .3s;
  transition: all .3s;
  box-shadow: 0 3px 5px rgb(0 0 0 / 50%);
  animation-name: txt_kirari;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
button.mail-mag-btn:hover {
  box-shadow: none;
  transform: scale(0.99, 0.99) translateY(2px);
}



@keyframes txt_kirari{
  0% {
    color: #cf000d;
  }
  50% {
    color: #c14d17;
  }
  100% {
   color: #cf000d;
  }
}

@media (max-width: 1200px) {

div.btn-box{ width: 100%; margin: auto; text-align: center; padding:30px 0;
 }


}

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

#main { width: 100%; margin: 0 auto; padding: 0; }

.buttonz-box{width: 88%; height:auto; margin-right:12%;
    display:flex;
    flex-direction:column;
}

.buttonList {
    margin-bottom: 20px;
  }

.artist-button { text-align: left;
  display:flex; flex-direction: column;
  align-items:center;
    width: 160px; height: 184px; position: relative;
    padding: 6px 6px 8px 6px; margin: 5px 0;
    transition: all 0.2s ease-out 0s;
  }

div.present-box{
	width: 90%; height: 680px; padding: 0; margin-left: 0px;
  display:flex;	flex-direction: column;
/* align-items : center; */
justify-content:center;

    }

.prezent-tit{ width: 100%; margin: auto; text-align: center; margin-bottom: 20px;
}


span.title-icon{color: #cf000d; font-size: 24px; font-weight: bold; display: inline; position: relative;}
.title-icon::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px; 
    background-image: url('../images/present-bg-kadomatsu01.png');
    background-position: 0 0;
    background-repeat: no-repeat; background-size: contain;
}
.title-icon::after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px; 
    background-image: url('../images/present-bg-kadomatsu02.png');
    background-position: 0 0;
    background-repeat: no-repeat; background-size: contain;
}

.prezent-tit img{ max-width: 20px; height: auto;}


div.pre-copy{width:100%; text-align:left; 
padding:1em 1em;
}

div.pre-copy h3{font-size: 100%;}
.pre-copy p{ margin-bottom: 10px;font-family: 'M PLUS 1p', sans-serif;transform: rotate(0.05deg); font-size: 80%;}

.sikisi-sample{width:100%;margin-top: 10px;}

button.mail-mag-btn { width: 100%; margin: auto;font-family: 'M PLUS 1p', sans-serif;
  font-size: 90%;
  padding: 0;
}

.present-inner{ 
  width: 90%;
  height: auto;
  
 }

.present-matsu{ position: absolute; top: 30px; right: 30px;
width: 50px; height: auto;
}
.present-mochi{position: absolute; bottom: 20px; left: 50px;
width: 50px; height: auto;
}

    }


    /* For iPad */
@media screen and (min-width:768px) and (max-width:1620px){
#main { width: 100%; margin: 0 auto; padding:20px 0 0 0;display:flex;align-items:flex-start;}

ul.sub-menu{ position: relative; width: 80%; margin:0 auto;
 display:flex;justify-content:center;align-items:center; font-size: 140%; margin-bottom: 20px; padding: 0; 
}
ul.sub-menu li{ width: 10%; text-align: center;font-family: 'Noto Sans JP', sans-serif; font-weight: 800; position: relative; }

.buttonz-box{width: 100%; height:auto;
    display:flex;
    flex-direction:column;
}

div.present-box{
	width: 100%; height: 960px; padding: 10px 0 0 0; margin: auto;
  display:flex;	flex-direction: column;
/* align-items : center; */
justify-content:center;

 
    }
.prezent-tit{ width: 100%; margin-top: 20px; 
}
span.title-icon{color: #cf000d; font-size: 30px; font-weight: bold; display: inline; position: relative;}
.title-icon::before {
    content: "";
    display: inline-block;
    width: 60px;
    height: 60px; 
    background-image: url('../images/present-bg-kadomatsu01.png');
    background-position: 0 0px;
    background-repeat: no-repeat; background-size: contain;
}
.title-icon::after {
    content: "";
    display: inline-block;
    width: 60px;
    height: 60px; 
    background-image: url('../images/present-bg-kadomatsu02.png');
    background-position: 0 0px;
    background-repeat: no-repeat; background-size: contain;
}

.present-matsu{ position: absolute; top: 50px; right: 50px;
width: 80px; height: auto;
}
.present-mochi{position: absolute; bottom: 20px; left: 50px;
width: 80px; height: auto;
}

.present-tit img{ width: 100%; height: auto;}
div.pre-copy{
	width:80%; padding:1em 1em; margin: auto; }
.pre-copy h3{ font-size: 140%; }
div.pre-copy p { font-size: 80%; }
.sikisi-sample{width:100%;margin-top: 10px;}

.mail-mag-btn { font-size: 100%;
  width: 100%;}
.daruma{width: 50px; position: absolute; top: 0px; right: 0px; }

}
    
/* For Laptop */
@media screen and (min-width:950px) and (max-width:1330px){

div.present-box{
	width: 100%; height: 960px; padding: 10px 0 0 0; margin: auto;
  display:flex;	flex-direction: column;
/* align-items : center; */
justify-content:center; 
    }
.prezent-tit{ width: 100%; margin-top: 20px;
}
span.title-icon{color: #cf000d; font-size: 30px; font-weight: bold; display: inline; position: relative; }
.title-icon::before {
    content: "";
    display: inline-block;
    width: 70px;
    height: 100px; 
    background-image: url('../images/present-bg-kadomatsu01.png');
    background-position: 0 10px;
    background-repeat: no-repeat; background-size: contain;
}
.title-icon::after {
    content: "";
    display: inline-block;
    width: 70px;
    height: 100px; 
    background-image: url('../images/present-bg-kadomatsu02.png');
    background-position: 0 10px;
    background-repeat: no-repeat; background-size: contain;
}


.present-tit img{ width: 100%; height: auto;}
div.pre-copy{
	width:80%; padding:1em 1em; margin: auto; }
.pre-copy h3{ font-size: 140%; }
div.pre-copy p { font-size: 80%; }
.sikisi-sample{width:100%;margin-top: 10px;}
}

/* @media screen and (min-width:1281px) and (max-width:1620px){

} */


/* !footer
---------------------------------------------------------- */
footer{ background: rgb(255,255,255);
background-image: url(../images/child-footer-bg.jpg),linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,192,233,1) 70%);
background-position: bottom; background-repeat: no-repeat;
}


#foot-box{
	margin:0; padding: 0;
	width:100%; height:200px;bottom:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    align-content:center;
}
#foot-item{ margin:10px;
    display:flex;
    flex-direction:row;
    align-content:center;
    align-items:center;
}



/*
=========================================
  Utilities
=========================================
*/
/* inview
---------------------------------*/
.sweepButton,.btn-box,.present-box,.header_logo{ opacity:0;}

.shosai-btn{
  transition: all 2s ease-in;
  opacity: 1 !important;animation : big 4s linear; 
}
.fadeInlow{
  transition: all 1.5s ease-in;
  opacity: 1 !important;
}

/* artist button */
.fadeIndown{
    transition: all 1s ease-in;
    transform: translateY(-10px);
    opacity: 1 !important;
}

@media screen and (min-width:950px) and (max-width:1280px){
/* top title */
.fadeInleft{
    transition: all 1s ease-in;
    transform: translateX(300px);
    opacity: 1 !important;
  }

}

@media screen and (min-width:1281px) and (max-width:1620px){
/* top title */
.fadeInleft{
    transition: all 1s ease-in;
    transform: translateX(450px);
    opacity: 1 !important;
  }

}


/* txt
---------------------------------*/

.txt-120{ font-size: 120%;}
.txt-60{ font-size: 60%;}

.txt-red{color: #cf000d;}
.txt-white{color: #fff;}


@media screen and (max-width: 768px) {
.txt-120{ font-size: 80%;}

}



/* aniamtion for header
---------------------------------*/
.fadeUp {
animation-name: fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}


@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.delay-time2{
animation-delay: 2s;
}

.ume-box{
position: absolute;left: 40%; top:3%; z-index: 3;
}


/* モーダル */
.modal-back {
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,.6);
  position: fixed;
  top: 0;
  left: 0;
}

.modal {
  background-color: #fff;
  padding: 30px 50px;
  border-radius: 10px;
  border: 4px solid rgb(89, 165, 246);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

.modal001 {
  background-color: rgb(202, 215, 242);
  transition: opacity .3s;
}

.modal002 {
  background-color: rgb(244, 244, 160);
  transition: opacity .3s;
}

.modal003 {
  background-color: rgb(145, 247, 145);
  transition: opacity .3s;
}

/* クローズボタン */
.close {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 10%;
  right: 5%;
  cursor: pointer;
}

.close__line {
  width: 4px;
  height: 25px;
  background-color: #fff;
  border-radius: 2px;
}

.close__line001 {
  display: inline-block;
  transform: rotate(45deg);
}

.close__line002 {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  transform: rotate(-45deg);
}