/*
Theme Name:さいとう製菓 トップページ用CSS
*/

@charset "UTF-8";

/*ローディングアニメーション*/
.circly {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    animation: clipPath 3s cubic-bezier(0.83, 0, 0.17, 1); forwards;
    background: #F8E22D;
    transition: all 2s ease;
}

@keyframes clipPath {
  0% {
  clip-path: circle(0% at 50% 50%);
  }
  100% {
  clip-path: circle(100% at 50% 50%);
  }
}
#loading{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

#loading_logo{
    max-width: 194px;
    animation: fadeOutDown 2s forwards 2s;
}

@keyframes fadeOutDown {
   0% {
      opacity: 1;
      transform: translateY(0);
   }
   100% {
      opacity: 0;
      transform: translateY(20px);
   } 
}
#load_inner{
    position: relative;
}
#load_inner h3{
    display: none;
}
#loading_logo.hidden{
    display: none;
}
/*header背景*/
.wrap{
    width: 100%;
    height: 100%;
    background: #F8E22D;
    display: none;
}
#bg{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
}
#img_cont{
	display: flex;
	justify-content: center;
    align-items: center;
}

.space{
    height: 100vh;
}
/*header動き*/
header{
    position: fixed;
    top:0;
    width:100%;
    z-index: 3;
}
header.UpMove{
    animation: UpAnime 0.5s forwards;
    pointer-events: none;
}
@keyframes UpAnime{
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

header.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*logo*/
#mv_logo{
	position: fixed;
	top:46vh;
	left: 50%;
	transform: translateX(-50%);
}
#mv_logo img{
	width: 198px;
}
.fadeOut{
    animation: fadeOut-keyframes 1s ease 0s 1 forwards;
}
@keyframes fadeOut-keyframes {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
/*トップ卵スライド*/
.slide_wrap {
    position: relative;
	display: flex;
    z-index: 2;
}
.slideshow {
	display: flex;
	animation: loop-slide 100s infinite linear 1s both;
}
.content {
	width: 240px;
    font-size: 12px;
    padding: 0 20px;
}
.slideshow li{
	text-align: center;
	font-family: 'Zen Maru Gothic', sans-serif;
    position: relative;
}
.slideshow li a{
	color: #231815;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.slide-paused:hover .slideshow,.pause{
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/*ポップアップ*/
.modal{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
}
.md-overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    z-index: 9999;
    background: #f8e22d;
    opacity: 0.9;
}
.md-contents{
    position: absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
    display: none;
    text-align: left;
    width: 1100px;
    z-index: 10000;
    padding: 10vh 90px 0;
    box-sizing: border-box;
    height: 60vh;
}
.md-inner{
    height: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.md-inner .md_right{
    width: 57.6%;
    max-width: 530px;
}
.md-inner .md_left{
    width: 39.8%;
    position: relative;
}
.md-inner .md_right dl dt{
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 20px;
	color: #000;
	font-weight: 700;
	position: relative;
	top: -5px;
}
.md-inner .md_right dl dd{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
}
.md_right .product_img{
    margin: 30px auto 0;
}
.md-inner .link_OnlineShop{
    width: 147px;
    position: absolute;
    right: 0;
    bottom: 10vh;
}
.md-xmark{
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  z-index: 9999;
  cursor: pointer;
}
.md_left .package .season{
    margin-top: 10px;
}

/*個別modal*/
#modal1 .md_left .package{
    max-width: 145px;
}
#modal1 .md_right .product_img{
    max-width: 615px;
    width: 93%;
}
#modal2 .md_left .package{
    max-width: 127px;
}
#modal2 .md_right .product_img{
    max-width: 424px;
    width: 64%;
}
#modal3 .md_left .package{
    max-width: 174px;
}
#modal3 .md_right .product_img{
    max-width: 500px;
    width: 75%;
}
#modal4 .md_left .package{
    max-width: 171px;
}
#modal4 .md_right .product_img{
    max-width: 475px;
    width: 72%;
}
#modal5 .md_left .package{
    max-width: 116px;
}
#modal5 .md_right .product_img{
    max-width: 510px;
    width: 77%;
}
#modal6 .md_left .package{
    max-width: 161px;
}
#modal6 .md_right .product_img{
    max-width: 569px;
    width: 90%;
}
#modal7 .md_left .package{
    max-width: 229px;
}
#modal7 .md_right .product_img{
    max-width: 463px;
    width: 70%;
}
#modal8 .md_right .product_img{
    max-width: 540px;
    width: 82%;
    margin: 0 auto;
}
#modal9 .md_left .package{
    max-width: 201px;
}
#modal9 .md_right .product_img{
    max-width: 466px;
    width: 70.6%;
}
#modal10 .md_left .package{
    max-width: 170px;
}
#modal10 .md_right .product_img{
    max-width: 426px;
    width: 64.5%;
}
#modal11 .md_left .package{
    max-width: 204px;
}
#modal11 .md_right .product_img{
    max-width: 485px;
    width: 75%;
}
#modal12 .md_left .package{
    max-width: 197px;
}
#modal12 .md_right .product_img{
    max-width: 462px;
    width: 70%;
}
#modal13 .md_left .package{
    max-width: 197px;
}
#modal13 .md_right .product_img{
    max-width: 462px;
    width: 70%;
}
#modal14 .md_left .package{
    max-width: 197px;
}
#modal14 .md_right .product_img{
    max-width: 468px;
    width: 70%;
}
#modal15 .md_left .package{
    max-width: 197px;
}
#modal15 .md_right .product_img{
    max-width: 461px;
    width: 70%;
}
#modal16 .md_right .product_img{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}
#modal16 .md-inner .md_right{
    width: 74%;
    max-width: 680px;
}
#modal16 .md_right > dl{
    max-width: 530px;
}
#modal16 .md_right .product_img #sailor01{
    max-width: 190px;
    width: 27.4%;
}
#modal16 .md_right .product_img #sailor01 dt{
    padding: 0 2%;
    box-sizing: border-box;
}
#modal16 .md_right .product_img #sailor02{
    max-width: 164px;
    width: 24.5%;
}
#modal16 .md_right .product_img #sailor03{
    max-width: 158px;
    width: 23%;
}
#modal16 .md_right .product_img dl{
    text-align: center;
}
#modal16 .md_right .product_img dl dt{
    font-size: 22px;
    font-family: 'Zen Maru Gothic', sans-serif;
    margin: 10px 0;
}
#modal16 .md_right .product_img dl dd{
    font-size: 16px;
}
#modal16 .md_right .product_img #sailor01 dd +dd{
    text-align: left;
}
#modal17 .md_left .package{
    max-width: 202px;
}
#modal17 .md_right .product_img{
    max-width: 461px;
    width: 70%;
}

/*top main*/
#main_area::before{
	content: "";
	display: block;
	width: 100%;
	height: 170px;
	background: url("../images/bg/bg_wave.png") center bottom repeat-x;
}
#main_area{
	position: relative;
	z-index: 1;
}
section{
	background: #fff;
}
.js-fadeUp {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity .5s, transform .5s;
}
.js-fadeUp.is-inview {
  opacity: 1;
  transform: translateY(0);    
}


/*
  area-1
=================================================================*/
#top_news{
    width: 100%;
    margin-bottom: 200px;
    display: flex;
    align-items:flex-end;
}
#top_news li dt{
    color: #92af5d;
    font-size: 12px;
    display: flex;
    align-items: center;
}
#top_news ul{
    width: 67%;
    max-width: 743px;
    margin-right: 60px;
}
#top_news li{
    padding: 20px 0 10px;
    background-image : linear-gradient(to right, #231815 2px, transparent 2px);
    background-size: 8px 1px;
    background-repeat: repeat-x; 
    background-position: left bottom;
}
#top_news li dd a{
    color: #595757;
    font-size: 14px;
}
#link_news{
    display: block;
    max-width: 125px;
}
/*top_about*/
#area-1{
    padding-bottom: 100px;
}
#top_about #about_cont{
    display: flex;
    flex-direction: row-reverse;
}
#tamago_img{
    width: 30%;
    max-width: 360px;
}
#top_about div dl{
    display: flex;
    flex-direction: row-reverse;
    width: 70%;
}
#top_about div dl dt{
    width: 218px;
}
#top_about div dl dd{
    writing-mode: vertical-rl;
    text-orientation: upright; 
    height: 400px;
    margin-top: 70px;
    line-height: 2em;
    font-size: 16px;
}
#top_about div dl dd span {
   text-combine-upright: all;
}
#top_about .top_link{
    margin-left: 360px;
    width: 340px;
}

/*変更部分*/
#top_tamago{
    margin-bottom: 200px;
    position: relative;
}
#top_tamago .right_side{
    width: 55%;
    padding-left: 15px;
    box-sizing: border-box;
  }
#top_tamago .left_side{
    width: 45%;
    display: flex;
    justify-content: flex-end;
}
#top_tamago .right_side img{
    max-width: 635px;
}
#top_tamago .text_img{
    position: absolute;
    top: -15px;
    right: -144px;
    width: 176px !important;
    height: auto;
}
#top_tamago .left_mv{
    max-width: 450px;
}
#top_terrace{
    position: relative;
    justify-content: flex-start;
    margin-bottom: 100px;
}
#top_terrace .left_side{
    width: 50%;
    margin-right: 2%;
}
#top_terrace .left_side .left_mv{
    max-width: 712px;
}
#top_terrace .text_img{
    position: absolute;
    top:-50px;
    left: 40%;
    width: 284px;
}
#top_terrace .right_side{
    width: 405px;
}

/*
  area-2
=================================================================*/
#area-2::before{
    content: "";
    display: block;
    height: 184px;
    width: 100%;
    background: url("../images/bg/bg_waveTop02.png") center bottom repeat-x;
    background-size: 2000px auto;
    position: absolute;
    top:0;
    left: 0;
}
#area-2::after{
    content: "";
    display: block;
    height: 173px;
    width: 100%;
    background: url("../images/bg/bg_waveTop.png") center top repeat-x;
    background-size: 2000px auto;
    position: absolute;
    bottom:0;
    left: 0;
}
#area-2{
    background: url("../images/top/topics_texture.png") #F8E22D repeat;
    background-size: 95%;
    position: relative;
    padding: 80px 0 230px;
    animation: scroll-anim 20s linear infinite;
}
@keyframes scroll-anim {
  100% {
    background-position: -200% 0;
  }
}
#area-2 h2{
    width: 313px;
    margin-left: 60px;
}
#area-2 ul{
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
}
#area-2 ul li{
    transform: scale(0);
}
#area-2 ul li:nth-child(odd){
    margin-top: 40px;
}
#area-2 ul li:first-child{
    max-width: 230px;
}
#area-2 ul li:nth-child(2){
    max-width: 200px;
}
#area-2 ul li:nth-child(n+3){
    max-width: 190px;
}

/*
  area-3
=================================================================*/
#area-3{
    padding-bottom: 100px;
}
#area-3 .container{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
}
#area-3 h2{
    width: 100%;
    margin-bottom: 30px;
}
#area-3 h2 img{
    width: 363px;
}
#area-3 #monthly_event{
    max-width: 460px;
    width: 45%;
}
#area-3 #monthly_event li{
    margin-bottom: 50px;
}
#area-3 #monthly_event .link{
    width: 80%;
    margin: 0 auto;
}
#pick_up{
    max-width: 470px;
    width: 45%;
}
#pick_up .widgettitle{
    display: none;
}
#pick_up h3 {
    margin-bottom: 25px;
}
#pick_up h3 img{
    width: 212px;
}
#pick_up #text-2 p{
    margin:20px 0 10px;
    font-weight: bold;
    font-size: 19px;
}
/*
  area-4
=================================================================*/
#area-4{
    background: url("../images/bg/footer_bg.png") top center repeat-x #fff;
    padding: 200px 0 150px;
    box-sizing: border-box;
}
#area4_img{
    max-width: 228px;
    margin: 0 auto;
    opacity: 0;
}
#area-4 ul{
    display: flex;
    justify-content: center;
    margin-top: 80px;
}
#area-4 ul li{
    margin: 0 35px 50px;
}
#area-4 ul li img{
    max-width: 357px;
}
.fadeInDown.is-inview{
    animation: fadeInDown 2s ease 0.5s forwards;
}
@keyframes fadeInDown {
   0% {
      opacity: 0;
      transform: translateY(-100px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   } 
}

/*
  footer
=================================================================*/
#music{
    display: flex;
    background: #f8e22d;
    z-index: 99999;
    border-radius: 30px 0 0 30px;
    padding: 5px 15px;
    align-items: center;
    opacity: 0; 
    position: fixed;
    right: 0;
    bottom: 50px;
}
#music .img{
    width: 44px;
    position: relative;
    top:-5px;
    margin-right: 10px;
}
#music p{
    color: #fff;
    text-align: left;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 500;
    line-height: 1.2em;
    padding: 0 0 5px;
}
#music p span{
    margin-left: 5px;
}
#music button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    font-size: 16px;
    line-height: 1em;
}
#music ul,#music_btn{
    display: flex;
    justify-content: space-between;
}
/*#music ul li{
    padding: 0 10px;
    line-height: 1em;
    
}
#music ul li:first-child{
    border-right: 1px solid #fff;
}
#play-btn{
    color: #fff;
}
#pause-btn{
    color: #c8c8c8;
}
*/
#chill .audio_button1{
    width: 110px;
    height: 22px;
    background: url("../images/bg/music01_off.png") center no-repeat;
    background-size: contain;
}
#orig .audio_button2{
    width: 83px;
    height: 22px;
    background: url("../images/bg/music02_off.png") center no-repeat;
    background-size: contain;
}
#chill .audio_button1.playing{
    background: url("../images/bg/music01_on.png") center no-repeat;
    background-size: contain;
}
#orig .audio_button2.playing{
    background: url("../images/bg/music02_on.png") center no-repeat;
    background-size: contain;
}

/*
  responsive
===========================================================================================================*/

@media screen and (max-width: 959px) {
    #loading_logo{
        max-width: 135px;
        animation: fadeOutDown 2s forwards 2s;
        position: relative;
        top:-50px;
    }
    
    /*header*/
    #header nav{
        display: none;
    }
    #main_area::before{
        height: 0;
        padding-top: 21.2%;
        background: url("../images/bg/bg_wave_sp.png") center bottom repeat-x;
        background-size: 100%;
    }
    /*ポップアップ*/
    .modal{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
    }
    .md-overlay{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999;
        background: #f8e22d;
        opacity: 0.9;
    }
    .md-contents{
        position: absolute;
        top:0;
        left:0;
        transform: translateX(0);
        display: none;
        text-align: left;
        width: 100%;
        z-index: 10000;
        padding: 10vh 5% 0;
        box-sizing: border-box;
        height: 50vh;
    }

    /*logo*/
    #mv_logo{
        width: 100%;
        margin: 0;
        padding: 0;
        position: fixed;
        top:45vh;
        text-align: center;
    }
    #mv_logo img{
        width: 34%;
        max-width: 198px;
    }
    
    /*トップ卵スライド*/
    .content {
        width: 200px;
        font-size: 12px;
    }
    .slideshow {
        animation: loop-slide 80s infinite linear 1s both;
    }

    /*
      area-1
    =================================================================*/
    /*top_about*/
    #area-1{
        padding-bottom: 100px;
    }
    #top_about{
        width: 70%;
        margin: 0 auto;
    }
    #top_about #about_cont{
        display: block;
        position: relative;
    }
    #tamago_img{
        position: absolute;
        right: -6%;
        width: 70%;
    }
    #top_about div dl{
        display: block;
        width: 40%;
        padding-left: 5%;
    }
    #top_about div dl dt{
        width: 100%;
        max-width: 256px;
    }
    #top_about div dl dd{
        display: none;
    }
    #top_about .top_link{
        width: 90%;
        margin: 0 auto;
        max-width: 581px;
        text-align: center;
    }
    /*変更部分*/
    #top_tamago{
        margin-bottom: 50px;
        position: relative;
    }
    #top_tamago .right_side{
        width: 80%;
        padding-left: 0;
        margin-top: -60px;
        z-index: 1;
        position: relative;
      }
    #top_tamago .left_side{
        width: 80%;
        display: flex;
        justify-content: flex-start;
        position: relative;
        z-index: 0;
    }
    #top_tamago .right_side img{
        max-width: 635px;
        width: 100%;
    }
    #top_tamago .text_img{
        position: absolute;
        top: -15px;
        right: 0;
        max-width: 240px;
        height: auto;
        width: 33% !important;
    }
    #top_tamago .left_mv{
        max-width: 450px;
        width: 75%
    }
    #top_terrace{
        position: relative;
        justify-content: flex-start;
        margin-bottom: 0;
    }
    #top_terrace .left_side{
        width: 100%;
        margin-right: 0;
    }
    #top_terrace .left_side .left_mv{
        max-width: 712px;
        width: 80%;
        position: relative;
        left: -10%;
    }
    #top_terrace .text_img{
        position: absolute;
        top:-20px;
        left: 60%;
        width: 40%;
    }
    #top_terrace .right_side{
        width: 80%;
    }

    /*
      area-2
    =================================================================*/
    #area-2::before{
        width: 100%;
        height: 0;
        background: url("../images/bg/bg_waveTop_sp.png") center bottom repeat-x;
        background-size: 100%;
        padding-top: 21.3%;
    }
    #area-2::after{
        width: 100%;
        height: 0;
        background: url("../images/bg/bg_wave_sp.png") center top repeat;
        background-size: 100%;
        padding-top: 21.2%;
    }
    #area-2{
        background: url("../images/top/topics_texture.png") #F8E22D repeat;
        background-size: 140% auto;
        position: relative;
        animation: scroll-anim 30s linear infinite;
        padding: 40px 0 200px;
    }
    @keyframes scroll-anim {
      100% {
        background-position: 100% 0;
      }
    }
    #area-2 h2{
        width: 30%;
        max-width: 369px;
        margin-left: 0;
    }
    #area-2 ul li{
        width: 20%;
    }    
    #area-2 ul li:nth-child(odd){
        margin-top: 40px;
    }
    #area-2 ul li img{
        width: 100%;
        height: auto;
    }
    #area-4{
        background: url("../images/bg/sp_footer_bg.png") center top no-repeat #fff;
        background-size: 100% auto;
        padding: 200px 0 100px;
    }

}
/*
  sp
===================================================================================================*/

@media screen and (max-width: 480px) {
    
    /*玉子スライド*/
    .content {
        width: 170px;
        font-size: 12px;
        padding: 0 5px;
    }
    
    /*ポップアップ*/
    .modal{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
    }
    .md-overlay{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999;
        background: #f8e22d;
        opacity: 0.9;
    }
    .md-contents{
        position: absolute;
        top:0;
        left:0;
        transform: translateX(0);
        display: none;
        text-align: left;
        width: 100%;
        z-index: 10000;
        padding: 10vh 5% 0;
        box-sizing: border-box;
        height: 100vh;
    }
    .md-inner{
        height: 100%;
        display: block;
    }
    .md-inner .md_right{
        width: 100%;
        max-width: 530px;
    }
    .md-inner .md_left{
        width: 100%;
        position: relative;
    }
    .md-inner .md_right dl dt{
        font-family: 'Zen Maru Gothic', sans-serif;
        font-size: 20px;
        color: #000;
        font-weight: 700;
        position: relative;
        top: -5px;
    }
    .md-inner .md_right dl dd{
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 16px;
    }
    .md_right .product_img{
        margin: 30px auto 0;
    }
    .md-inner .link_OnlineShop{
        width: 147px;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .md_left .package{
        width: 30%;
        margin-top: 30px;
    }
    .md_left .package.yoko{
        width: 45%;
        margin-top: 60px;
    }
    #modal1 .md_right .product_img{
        max-width: 615px;
        width: 93%;
    }
    #modal7 .md_right .product_img{
        max-width: 463px;
        width: 70%;
        margin-bottom: 50px;
    }
    #modal8 .md_left{
        min-height: 20vh;
    }
    #modal16 .md_right .product_img{
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
    }
    #modal16 .md-inner .md_right{
        width: 100%;
    }
    #modal16 .md_right .product_img #sailor01{
        width: 30%;
    }
    #modal16 .md_right .product_img #sailor01 dt{
        padding: 0 2%;
        box-sizing: border-box;
    }
    #modal16 .md_right .product_img #sailor02{
        width: 26.7%;
    }
    #modal16 .md_right .product_img #sailor03{
        width: 26%;
    }
    #modal16 .md_right .product_img dl{
        text-align: center;
    }
    #modal16 .md_right .product_img dl dt{
        font-size: 22px;
        font-family: 'Zen Maru Gothic', sans-serif;
        margin: 10px 0;
    }
    #modal16 .md_right .product_img dl dd{
        font-size: 14px;
    }
    #modal16 .link_OnlineShop{
        bottom: -100px;
    }
    #modal17 .link_OnlineShop{
        bottom: -50px;
    }

    /*
      area-1
    =================================================================*/
    #top_news{
        width: 100%;
        margin-bottom: 100px;
        display:block;
    }
    #top_news ul{
        width: 100%;
        margin-right: 0;
    }
    #link_news{
        max-width: 125px;
        margin: 50px auto;
    }
    
    /*変更部分*/
    #top_tamago{
        margin-bottom: 50px;
        position: relative;
    }
    #top_tamago .right_side{
        width: 100%;
        padding-left: 0;
        margin-top: -60px;
        z-index: 1;
        position: relative;
      }
    #top_tamago .left_side{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        position: relative;
        z-index: 0;
    }
    #top_tamago .right_side img{
        max-width: 635px;
        width: 100%;
    }
    #top_tamago .text_img{
        position: absolute;
        top: -15px;
        right: 0;
        max-width: 240px;
        height: auto;
        width: 33% !important;
    }
    #top_tamago .left_mv{
        max-width: 450px;
        width: 75%
    }
    #top_terrace{
        position: relative;
        justify-content: flex-start;
        margin-bottom: 0;
    }
    #top_terrace .left_side{
        width: 100%;
        margin-right: 0;
    }
    #top_terrace .left_side .left_mv{
        max-width: 712px;
        width: 100%;
        position: relative;
        left: -10%;
    }
    #top_terrace .text_img{
        position: absolute;
        top:-20px;
        left: 60%;
        width: 40%;
    }
    #top_terrace .right_side{
        width: 100%;
    }

    /*
      area-2
    =================================================================*/
    #area-2{
        background: url("../images/top/topics_texture.png") #F8E22D repeat;
        background-size: 500%;
        position: relative;
        animation: scroll-anim 80s linear infinite;
        padding: 40px 0 100px;
    }
    @keyframes scroll-anim {
      100% {
        background-position: 100% 0;
      }
    }
    #area-2 h2{
        width: 60%;
        max-width: 369px;
        margin-left: 0;
    }
    #area-2 ul{
        flex-wrap:wrap;
        margin-top: 40px;
    }
    #area-2 ul li:nth-child(odd){
        margin-top: 0;
    }
    #area-2 ul li:nth-child(2) img{
        width: 94%;
        margin: 0 auto;
    }
    #area-2 ul li:nth-child(2){
        margin-top: 40%;
    }
    #area-2 ul li:nth-child(3){
        margin-top: -30%;
    }
    #area-2 ul li:nth-child(4){
        margin-top: 10%;
    }
    #area-2 ul li:nth-child(5){
        margin-top: -30%;
    }

    #area-2 ul li{
        width: 50%;
        text-align: center;
    }
    #area-2 ul li img{
        width: 100%;
        height: auto;
    }
    #area-2 ul li:nth-child(n+3) img{
        width: 90%;
    }
    /*
      area-3
    =================================================================*/
    #area-3{
        padding-bottom: 100px;
    }
    #area-3 .container{
        display: block;
    }
    #area-3 h2{
        width: 80%;
        margin-bottom: 20px;
    }
    #area-3 h2 img{
        width: 100%;
    }
    #area-3 #monthly_event{
        max-width: 460px;
        width: 90%;
        margin: 0 auto 50px;
    }
    #area-3 #monthly_event li{
        margin-bottom: 50px;
    }
    #area-3 #monthly_event .link{
        width: 90%;
        margin: 0 auto;
    }
    #pick_up{
        max-width: 470px;
        width: 90%;
        margin: 0 auto;
    }
    #pick_up h3 {
        width: 45%;
        margin-bottom: 25px;
    }
    #pick_up h3 img{
        width: 100%;
    }
    #pick_up dl dt{
        margin:20px 0 10px;
        font-weight: bold;
        font-size: 19px;
    }

    /*
      area-4
    =================================================================*/
    #area-4{
        background: url("../images/bg/sp_footer_bg.png") center top no-repeat #fff;
        background-size: 100% auto;
        padding: 100px 0;
    }
    #area-4 .container{
        display: block;
    }
    #area-4 ul{
        display: block;
    }
    #area-4 ul li{
        margin: 0 auto 20px;
        width: 80%;
    }
    #area-4 ul li img{
        max-width: 357px;
        width: 100%;
    }
    #area4_img{
        max-width: 303px;
        margin: 0 auto;
        opacity: 0;
        width: 40%;
    }
    
    /*
      footer
    =================================================================*/
    #music{
        padding: 5px 10px;
        bottom: 50px;
    }
    #music .img{

    }
    #music p{
        font-size: 12px;
        padding: 0 0 3px;
    }
    #music button{
        font-size: 14px;
    }
    #chill{
        aspect-ratio:178/35;
        width: 55.6%;
    }
    #chill .audio_button{
        width: 100%;
        height: 100%;
    }
    #orig{
        aspect-ratio:134/35;
        width: 41.8%;
    }
    #orig .audio_button{
        width: 100%;
        height: 100%;
    }
}