@charset "utf-8";
/* ------------------------------------------------------------ PC */

#wrapper { min-width: 1440px; position: relative;}

/* 背景 */


main { background: url(../images/bg_footer.png) no-repeat center bottom; background-size: 100% auto;}
.bg_paint1,
.bg_paint2,
.bg_paint3 { position: relative;}

.bg_paint1:before { display: inline-block; position: absolute; top: 910px; right: 0; content: ""; width: 100%; height: 816px; background: url(../images/bg_01.png) no-repeat right top; background-size: contain; z-index: 0;}
.bg_paint1:after { display: inline-block; position: absolute; top: 1920px; left: 0; content: ""; width: 100%; height: 703px; background: url(../images/bg_02.png) no-repeat left top; background-size: contain; z-index: -1;}
.bg_paint2:before { display: inline-block; position: absolute; top: 2800px; right: 0; content: ""; width: 100%; height: 636px; background: url(../images/bg_03.png) no-repeat right top; background-size: contain; z-index: 0;}
.bg_paint2:after { display: inline-block; position: absolute; bottom: 2570px; left: 0; content: ""; width: 100%; height: 811px; background: url(../images/bg_04.png) no-repeat left top; background-size: contain; z-index: -1;}
.bg_paint3:before { display: inline-block; position: absolute; bottom: 690px; right: 0; content: ""; width: 100%; height: 909px; background: url(../images/bg_05.png) no-repeat right top; background-size: contain; z-index: -1;}

.bg_flower { /* position: relative; */ background: url(../images/bg_pattern.png) repeat-y center top; z-index: 2;}




/* バナー */

.bnr { position: fixed; z-index: 5; width: 183px; height: 183px; bottom: 32px; right: 42px; background-color: #D9005E; border-radius: 50%;}
.bnr a { position: absolute; top: 80%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); display: block;}
.bnr p { font-size: 20px; color: #fff; line-height: 1.4; text-align: center; letter-spacing: 0.01em; font-weight: 600;}
.bnr p span { display: block; font-size: 17px; font-weight: 600; margin-bottom: 10px;}


/* 画面外にいる状態 */
.fade { opacity : 0.1; transition : all 500ms;}

/* 画面内に入った状態 */
.fade.scrollin { animation-name: fadeInAnime; animation-duration: 1.5s; animation-fill-mode: forwards; opacity: 0;}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* fv */

#fv { position: relative; z-index: 1; width: 100%; height: 100vh; background: url(../images/bg_fv.png) no-repeat; background-position: center bottom; background-size:  cover;}
#fv h1 img { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
#fv div img { position: absolute; top: 20px; left: 20px;}
#fv p{ position: fixed; width: 210px; bottom: 100px; right: 40px; z-index: 900; }
#fv p img{ width: 100%; height: auto; }


/* about */

#about { padding: 220px 0 300px; text-align: center;}
#about p { font-size: 19px; line-height: 2.211; letter-spacing: 0.01em; margin-bottom: 45px;}
#about img { margin: 0 auto;}


/* movie */

#movie { padding: 0 0 300px;}
#movie .title { padding: 43px 0 23px; text-align: center; background: url(../images/title_01.png) no-repeat center center; background-size: 650px auto;}
#movie h2 { font-size: 21px; letter-spacing: 0.01em; font-weight: 600;}
#movie .movie { background-color: rgba(255,255,255,0.8);}
#movie .top { padding: 29px 0 20px; text-align: center;}
#movie .top h3 { font-size: 32px; letter-spacing: 0.035em; font-family: "fot-tsukuaoldmin-pr6n", serif; font-weight: 300; font-style: normal; color: #000;}
#movie .top h3 span { display: block; font-size: 22px; margin-bottom: 15px;}
#movie iframe { width: 100%; height: auto; aspect-ratio: 16/9;}


/* campaign */

#campaign { padding: 0 0 200px;}
#campaign .title { padding: 80px 0 21px; text-align: center; background: url(../images/title_02.png) no-repeat center top; background-size: 890px auto;}
#campaign h2 { font-size: 21px; letter-spacing: 0.01em; font-weight: 600;}

#campaign .campaign { background-color: rgba(255,255,255,0.8); text-align: center; padding: 0 0 90px;}
#campaign .campaign .text { padding: 150px 0 90px;}
#campaign .campaign .text p { font-size: 22px; line-height: 2; letter-spacing: 0.035em; margin-bottom: 60px;}
#campaign .campaign .text:last-child { padding: 100px 0 90px;}

#campaign .campaign .end{ padding: 0 0 100px; }
#campaign .campaign .end h3{ font-size: 32px; line-height: 200%; color: #CE0040;}
#campaign .campaign .end_t{font-size: 22px;  padding: 0 0 90px; line-height: 190%;width: 83%; margin: 0 auto; letter-spacing: -1px;}

#campaign .campaign .btns { width: 400px; margin: 0 auto;}
#campaign .campaign .btns:last-child { margin-bottom: 50px;}
#campaign .campaign .btns a { display: block;}
#campaign .campaign .btns div { width: 100%; border-radius: 30px; font-weight: 700;}
#campaign .campaign .btns .apply { margin-bottom: 58px;}
#campaign .campaign .btns .apply div { font-size: 20px; color: #fff; background-color: #D9005E; padding: 20px 0;}
#campaign .campaign .btns .apply p { font-size: 12px; color: #D9005E; margin: 10px 0 0;}
#campaign .campaign .btns img { margin-right: 7px; vertical-align: baseline;}
#campaign .campaign .btns .note div { font-size: 12px; font-weight: 700; line-height: 1.5; color: #000; background: #DBDBDB url(../images/logo_01.svg) no-repeat 70% center; background-size: auto; padding: 11px 130px 13px 0; box-sizing: border-box;}
#campaign .campaign .btns p { font-size: 12px; letter-spacing: 0.01em; margin-bottom: 10px;}
#campaign .campaign .btns .note p:last-child { letter-spacing: inherit; margin: 10px 0 0;}

#campaign .campaign .summary { padding: 150px 0 0; width: 460px; margin: 0 auto;}
#campaign .campaign .summary h3 { font-size: 28px; margin-bottom: 40px; display: flex; align-items: center;}
#campaign .campaign .summary h3:before,
#campaign .campaign .summary h3:after { border-top: 1px solid; content: ""; flex-grow: 1;}
#campaign .campaign .summary h3:before { margin-right: 1em;}
#campaign .campaign .summary h3:after { margin-left: 1em;}

#campaign .campaign .summary .sum_txt { text-align: left;}
#campaign .campaign .summary .sum_txt h4 { margin-bottom: 20px;}
#campaign .campaign .summary .sum_txt ul { margin-bottom: 60px;}
#campaign .campaign .summary .sum_txt li { font-size: 18px; line-height: 2;}
#campaign .campaign .summary .sum_txt p { font-size: 20px; line-height: 1.5; margin-bottom: 58px;}
#campaign .campaign .summary .sum_txt p span { display: block; font-size: 16px; margin-top: 15px;}
#campaign .campaign .summary .sum_txt p:last-child { font-size: 24px; margin-bottom: 0}

#campaign .sns { display: flex; justify-content: space-between; width: 280px; margin: 100px auto 0;}

#campaign .campaign .rules { width: 90%; height: 10rem; margin: 0 auto; padding: 15px 20px; overflow-y: scroll; border: 1px solid #707070; text-align: left;}
#campaign .campaign .rules h3,
#campaign .campaign .rules h4,
#campaign .campaign .rules h5 { font-size: 14px; margin-bottom: 10px; line-height: 1.4;}
#campaign .campaign .rules p { font-size: 14px; line-height: 1.4; padding-left: 2em;}
#campaign .campaign .rules p span { display: block; font-size: 20px; color: #000;}
#campaign .campaign .rules div p { background: radial-gradient(.1em .1em at center center,#5A5A5A,#5A5A5A 100%,transparent,transparent); background-position: 1em 0.5em; background-repeat: no-repeat; background-size: 1.0em .3em;}
#campaign .campaign .rules .num p { background: none; text-indent: -1em; padding-left: 2em;}
#campaign .campaign .rules div { margin-bottom: 10px;}

#campaign .campaign .rules a { text-decoration: underline;}


/* presentation */
#campaign #presentation{ padding: 0 0 70px;}
#campaign #presentation h3{ padding: 0 0 90px; }
#campaign #presentation .box{ width: 685px; margin: 0 auto 80px; text-align: left; }

#campaign #presentation .ttl_box{ display: flex; align-items: center; padding: 18px 25px; color: #000; font-family: "fot-tsukuaoldmin-pr6n", serif; }
#campaign #presentation .grand .ttl_box{ background: url(../images/bg_grand.jpg) center/cover no-repeat; }
#campaign #presentation .winner .ttl_box{ background: url(../images/bg_winner.jpg) center/cover no-repeat; }

#campaign #presentation .ttl_box .ttl{ width: 400px; margin: 0 10px; }
#campaign #presentation .ttl_box .ttl h4{ font-size: 30px; line-height: 140%; padding: 0 0 10px; font-weight: 600; text-align: center; }
#campaign #presentation .ttl_box .ttl h4 span{ display: block; padding: 0 0 8px; font-size: 18px; font-weight: 700; }
#campaign #presentation .ttl_box .ttl p{ font-size: 20px; padding: 20px 0 0; background-image: linear-gradient(to right, #000 2px, transparent 2px); background-size: 5px 1px; background-repeat: repeat-x; background-position: left top; font-weight: 600;  text-align: center; line-height: 150%;}

#campaign #presentation .ttl_box .ttl p span{display: block; margin: 10px auto 0 58%; width: 21%;}

#campaign #presentation .text_box{ display: none; padding: 50px 0 80px; border-color: #707070; border-style: solid; border-width: 0 1px 0 1px; }
#campaign #presentation .text_box p{ padding: 0 40px 115px; font-size: 18px; line-height: 190%; font-family: "futura-pt", sans-serif; font-weight: 300; }
#campaign #presentation .text_box .archive{ width: 400px; margin: 0 auto; }
#campaign #presentation .text_box .archive div{ display: flex; align-items: center; justify-content: center; padding: 12px 0; border: 2px solid #5A5A5A; border-radius: 50px; }
#campaign #presentation .text_box .archive div p{ padding: 0 20px 0 0; text-align: center; font-size: 12px; line-height: 150%; font-weight: 600; }
#campaign #presentation .text_box .archive p.page{ font-size: 12px; padding: 5px 0; background: url(../images/icn_09.svg) calc(50% - 90px) center/15px no-repeat; text-align: center; font-weight: 500; color: #707070; }
#campaign #presentation .text_box .archive div small{ font-size: 10px; }

#campaign #presentation .slide_btn{ padding: 10px 0 20px; border-style: solid; border-width: 0 1px 1px 1px; border-color: #707070; display: block;}
#campaign #presentation .slide_btn span{ position: relative; display: block; width: 160px; margin: 0 auto; }
#campaign #presentation .slide_btn span:after{ position: absolute; top: 8px; right: 0; width: 120px; height: 20px; content: "作品をみる"; font-size: 21px; color: #5A5A5A; transition: all .8s; }
#campaign #presentation .slide_btn img{ transform: rotate(180deg); transition: all .8s; }

/* open */
#campaign #presentation .slide_btn.open span:after{ top: 0; content: "折りたたむ"; transition: all .8s; }
#campaign #presentation .slide_btn.open img{ transform: rotate(0); transition: all .8s; }

/*
#campaign #presentation .tag_a.slide_btn{display: none;}
#campaign #presentation .tag_a.open_1{display: block;}
#campaign #presentation .tag_p.open_2{display: none;}
*/

/* prize */

#campaign .campaign .prize { width: 681px; margin: 0 auto 150px;}
#campaign .campaign .prize .reward { margin-bottom: 80px;}
#campaign .campaign .prize .reward:nth-of-type(2) { margin-bottom: 60px;}
#campaign .campaign .prize h4 { font-size: 32px; font-family: "ten-mincho", serif; letter-spacing: 0.03em; color: #000; margin-bottom: 20px;}
#campaign .campaign .prize h4 span { background: linear-gradient(transparent 85% , #F8D941 85%);}
#campaign .campaign .prize p { font-size: 17px; line-height: 1.529; margin-bottom: 20px;}
#campaign .campaign .prize h5 { font-size: 24px; margin-bottom: 10px;}
#campaign .campaign .prize a { display: inline-block; font-size: 12px; text-decoration: underline #707070; margin-top: 24px;}

#campaign .campaign .prize .flex { display: flex; justify-content: space-between;}
#campaign .campaign .prize .flex h4 { font-size: 28px; margin-bottom: 12px;}
#campaign .campaign .prize .flex h4 small { display: inline-block; font-size: 18px; line-height: 1; text-align: center; margin-bottom: 5px; }
#campaign .campaign .prize .flex h5 { font-size: 14px; margin-bottom: 10px;}
#campaign .campaign .prize .flex h5 span { display: block; line-height: 1.571; margin-bottom: 10px;}
#campaign .campaign .prize .flex p { font-size: 14px; line-height: 1.571; margin: 11px 0 0;}
#campaign .campaign .prize .flex a { margin-top: 10px;}

#campaign .campaign .prize .flex_l,
#campaign .campaign .prize .flex_r { width: 311px;}
#campaign .campaign .prize .flex_r h4 { font-size: 26px; margin-bottom: 4px;}
#campaign .campaign .prize .flex_r h4 span { display: inline-block; background-position-y: 25px;}
#campaign .campaign .prize .flex_r h5 { margin-bottom: 8px;}
#campaign .campaign .prize .flex_l small { display: inline-block; font-size: 10px; margin-top: 1em; line-height: 1.2;}

#campaign .campaign .end_message{ padding: 150px 0 60px; }
#campaign .campaign .end_message p{ font-size: 22px; line-height: 160%; text-align: center; letter-spacing: 0.35; }



/* contact */

#contact { padding: 100px 0; margin: 0 auto; text-align: center;}
#contact img { margin: 0 auto 50px;}
#contact p { font-size: 19px; letter-spacing: 0.01em; margin-bottom: 21px;}
#contact a { font-size: 16px;}

.bottom_con { padding: 150px 0 500px; text-align: center;}
.bottom_con a { font-size: 19px; letter-spacing: 0.01em; text-decoration: underline #707070;}





/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
#wrapper { min-width: initial;}

/* 背景 */

main { background: url(../images/bg_footer.png) no-repeat center bottom; background-size: 250% auto;}

.bg_paint1:before { display: inline-block; position: absolute; top: 540px; right: 0; content: ""; width: 100%; height: 417px; background: url(../images/bg_01_sp.png) no-repeat right top; background-size: 222px auto;}
.bg_paint1:after { display: inline-block; position: absolute; top: 1170px; left: 0; content: ""; width: 100%; height: 635px; background: url(../images/bg_02_sp.png) no-repeat left top; background-size: 306px auto; }
.bg_paint2:before { display: inline-block; position: absolute; top: 2515px; right: 0; content: ""; width: 100%; height: 250px; background: url(../images/bg_03_sp.png) no-repeat right top; background-size: 222px auto;}
.bg_paint2:after { display: inline-block; position: absolute; bottom: 2360px; left: 0; content: ""; width: 100%; height: 451px; background: url(../images/bg_04_sp.png) no-repeat left top; background-size: 345px auto;}
.bg_paint3:before { display: inline-block; position: absolute; bottom: 880px; right: 0; content: ""; width: 100%; height: 800px; background: url(../images/bg_05_sp.png) no-repeat right bottom; background-size: 100% auto;}

.bg_flower { background: none;}
.bg_flower_sp { background: url(../images/bg_pattern02_sp.png) repeat-y center top; background-size: 100% auto;}



/* バナー */

.bnr { width: 130px; height: 130px; right: 21px;}
.bnr a { top: 80%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); display: block;}
.bnr p { font-size: 15px;}
.bnr p span { font-size: 13px;}


/* fv */

#fv { background: url(../images/bg_fv_sp.png) no-repeat; background-position: center bottom; background-size:  cover;}
#fv p{ width: 130px; right: 10px; bottom: 80px; }



/* about */

#about { padding: 80px 0 100px; background: url(../images/bg_pattern01_sp.png) no-repeat center top; background-size: contain;}
#about p { font-size: 14px; margin-bottom: 30px; font-feature-settings: "palt";}
#about img { background-color: #FFF7ED; padding: 0 10px;}


/* movie */

#movie { padding:  0 0 100px;}
#movie .title { padding: 21px 0 11px; background-size: 360px auto;}
#movie h2 { font-size: 16px;}
#movie .top { padding: 29px 0 20px; text-align: center;}
#movie .top h3 { font-size: 25px;}
#movie .top h3 span { font-size: 18px;}
#movie iframe { width: 100%; height: auto; aspect-ratio: 16/9;}
#movie img { width: 100%; height: auto;}


/* campaign */

#campaign { padding: 0 0 100px;}
#campaign .title { padding: 37px 0 7px; background-size: 420px auto;}
#campaign h2 { font-size: 16px;}

#campaign .campaign { padding: 0 0 83px;}
#campaign .campaign .c_top { width: 100%; height: auto;}
#campaign .campaign .text { padding: 53px 0 0;}
#campaign .campaign .text p { font-size: 15px; letter-spacing: 0.01em; margin-bottom: 60px;}

#campaign .campaign .end{ width: 100%; margin: 0 auto 50px; padding: 0 3%; box-sizing: border-box; }
#campaign .campaign .end h3{ font-size: 20px; line-height: 160%; }

#campaign .campaign .btns { width: 277px;}
#campaign .campaign .btns .apply { margin-bottom: 36px;}
#campaign .campaign .btns .apply p { font-size: 12px; color: #D9005E;}
#campaign .campaign .btns img { margin-right: 6px;}
#campaign .campaign .btns .note div { background: #DBDBDB url(../images/logo_01.svg) no-repeat 90% center; background-size: auto; padding: 11px 105px 13px 0;}
#campaign .campaign .btns  p { line-height: 1.333;}
#campaign .campaign .btns .note p:last-child { letter-spacing: inherit;}

#campaign .campaign .summary { padding: 100px 21.5px 0; width: 100%; box-sizing: border-box;}
#campaign .campaign .summary h3 { font-size: 26px; margin-bottom: 41px;}
#campaign .campaign .summary h3:before,
#campaign .campaign .summary h3:after { border-top: 2px solid;}
#campaign .campaign .summary h3:before { margin-right: 1em;}
#campaign .campaign .summary h3:after { margin-left: 1em;}

#campaign .campaign .summary .sum_txt { margin-bottom: 0;}
#campaign .campaign .summary .sum_txt h4 { font-size: 14px; margin-bottom: 20px;}
#campaign .campaign .summary .sum_txt ul { margin-bottom: 42px;}
#campaign .campaign .summary .sum_txt li { font-size: 14px; line-height: 2; text-indent: -1em; padding-left: 1em;}
#campaign .campaign .summary .sum_txt p { font-size: 16px; margin-bottom: 42px;}
#campaign .campaign .summary .sum_txt p span { font-size: 14px; line-height: 2;}
#campaign .campaign .summary .sum_txt ul span { display: inline;}
#campaign .campaign .summary .sum_txt p:last-child { font-size: 20px; line-height: 1.9;}

#campaign .campaign .summary .rules a { margin-bottom: 35px;}


/* presentation */
#campaign #presentation{ padding: 0 0 55px; }
#campaign #presentation h3{ padding: 0 0 50px; width: 100%; }

#campaign .campaign .end_t{font-size: 15px; padding: 0 0 50px; width: 90%; }
#campaign #presentation h3 img{ width: 100%; height: auto; }

#campaign #presentation .box{ width: 90%; margin: 0 auto 45px; }
#campaign #presentation .ttl_box{ padding: 10px 19px; width: 100%; box-sizing: border-box; }
#campaign #presentation .ttl_box img{ width: 40%; height: auto; }

#campaign #presentation .ttl_box .ttl{ width: 55%; margin: 0 0 0 7px; }
#campaign #presentation .ttl_box .ttl h4{ font-size: 15px; text-align: center; }
#campaign #presentation .ttl_box .ttl h4 span{ padding: 0 0 6px; font-size: 12px; }
#campaign #presentation .ttl_box .ttl p{ font-size: 12px; padding: 10px 0 0; }


#campaign #presentation .slide_btn{ padding: 2px 0 7px; }
#campaign #presentation .slide_btn span{ width: 100px; }
#campaign #presentation .slide_btn img{ width: 13px; }
#campaign #presentation .slide_btn span:after{ width: 65px; font-size: 13px; }

#campaign #presentation .text_box{ padding: 20px 0 80px; }
#campaign #presentation .text_box p{ padding: 0 20px 70px; font-size: 13px; line-height: 220%; }

#campaign #presentation .text_box .archive{ width: 90%; }
#campaign #presentation .text_box .archive div p{ padding: 0 10px 0 0; font-size: 10px; }

#campaign .campaign .end_message{ padding: 50px 0 0; }
#campaign .campaign .end_message p{ font-size: 15px; line-height: 190%; }


#campaign .sns { display: flex; justify-content: space-between; width: 280px; margin: 67px auto 0;}

#campaign .campaign .rules { width: 80%; padding: 15px 20px;}
#campaign .campaign .rules h3,
#campaign .campaign .rules h4,
#campaign .campaign .rules h5 { font-size: 12px; margin-bottom: 10px; line-height: 1.4;}
#campaign .campaign .rules p { font-size: 12px; line-height: 1.4;}
#campaign .campaign .rules div { margin-bottom: 10px;}


/* prize */

#campaign .campaign .prize { width: 100%; margin: 0 auto 100px; padding: 0 25px; box-sizing: border-box;}
#campaign .campaign .prize .reward { margin-bottom: 100px;}
#campaign .campaign .prize .reward:nth-of-type(2) { margin-bottom: 100px;}
#campaign .campaign .prize h4 { font-size: 28px; margin-bottom: 15px;}
#campaign .campaign .prize h4 span { background: linear-gradient(transparent 85% , #F8D941 85%);}
#campaign .campaign .prize p { font-size: 14px; line-height: 1.529; margin-bottom: 15px;}
#campaign .campaign .prize h5 { font-size: 15px;}
#campaign .campaign .prize a { display: inline-block; font-size: 11px; text-decoration: underline #707070; margin-top: 10px;}
#campaign .campaign .prize img { margin: 0 auto; width: 100%; height: auto;}

#campaign .campaign .prize .flex { display: block;}
#campaign .campaign .prize .flex h4 { font-size: 28px; margin-bottom: 15px;}
#campaign .campaign .prize .flex h4 small { font-size: 18px; line-height: 1; text-align: left; margin-top: 0;}
#campaign .campaign .prize .flex h5 { font-size: 15px; line-height: 1.625; margin-bottom: 15px; font-feature-settings: "palt";}
#campaign .campaign .prize .flex h5 span { display: block; font-size: 14px; margin-bottom: 8px;}
#campaign .campaign .prize .flex p { font-size: 14px; line-height: 1.625; margin: 11px 0 0;}

#campaign .campaign .prize .flex_l,
#campaign .campaign .prize .flex_r { width: 100%;}
#campaign .campaign .prize .flex_l { margin-bottom: 100px;}
#campaign .campaign .prize .flex_r h4 { margin-bottom: 15px;}

#campaign .campaign .prize .flex_l small { display: inline-block; font-size: 10px; margin-top: 1em;}


/* contact */

#contact { padding: 40px 0 0; margin: 0 auto; text-align: center;}
/* #contact img { margin-bottom: 25px; padding: 0 10px; background-color: #fff;} */
#contact img { margin-bottom: 25px; padding: 0 10px; }

#contact p { font-size: 17px; margin-bottom: 25px;}

.bottom_con { padding: 156px 0 333px;}
.bottom_con a { font-size: 17px;}



}