@charset "utf-8";

#sgsContents main {color: #3d3d3d;}
#sgsContents main a{color: #00eaff;}
#sgsContents main a:hover{text-decoration: none;}

/* pc
__________________________________________________*/
@media screen and (min-width:641px){

.pc-item{display: inline-block;}
.sp-item{display:none;}

.ie11 #sgsContents {transform: scale(0.999); top: -4px;}
.ie11 #sgsContents::before {transform: scale(0.999);}
.ie11.windowloaded #sgsContents,
.ie11.windowloaded #sgsContents::before {transform: scale(1);}
#sgsContents::after{content: ''; background: url(../images/bg-mv.jpg) center bottom no-repeat; width: 1920px; position: absolute; left: 50%; top: 60px; margin-left: -980px; z-index: 0; height:1010px;}
#sgsContents main {min-height: 640px; margin-bottom: 30px;}

/* mainVisual */
#mainVisual {width: 100%; height: 1590px; padding: 70px 0 0; margin-bottom: 0;}
#mainVisual h1 {position: relative; z-index: 200; background: url(../images/h1.png) center top no-repeat; height: 240px; top:640px;}

#mainVisual p.copy{height: 219px; width: 1288px; position: absolute; left: 50%; bottom: 0; margin-left: -624px; z-index: 100; top:820px;}
#mainVisual p.copy::after{content: ''; height: 100%; width: 100%; background: url(../images/copy_0618.png) center center no-repeat; position: absolute; left: 0; top: 0;}

#mainVisual p.date{height: 100px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; top:1050px;}
#mainVisual p.date::before{content: ''; height: 100%; width: 100%; background: rgba(255,95,116,1); position: absolute; left: 0; top: 0; z-index: -1;}
#mainVisual p.date::after{content: ''; height: 100%; width: 100%; background: url(../images/date_0530.png) center center no-repeat; position: absolute; left: 0; top: 0;}

/* top3 */
#top3 {height: 860px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; top:1150px;}
#top3 h2{height: 200px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; top:0;}
#top3 h2::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 h2::after{content: ''; height: 100%; width: 100%; background: url(../images/title_top3.png) center center no-repeat; position: absolute; left:0; top: 0;}

#top3 p.image1{height: 400px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; top:160px;}
#top3 p.image1::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 p.image1_inline{height: 375px; width: 750px; position: absolute; left: 50%; bottom: 0; margin-left: -375px; z-index: 200; top:170px;}
#top3 p.image1_inline a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/thumb_top1.jpg) center center no-repeat; position: absolute; left:0; top: 0;}
#top3 p.comment_author1{height: 100px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; font-size:24px; letter-spacing: 0.1em; line-height:2em; color:#000; top:560px;}
#top3 p.comment_author1::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 p.comment1_inline{height: 500px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200;font-size:16px; letter-spacing: 0.1em; line-height:1.5em; padding:20px; top:610px;}
#top3 p.comment1_inline::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 p.comment1_inline::after{content: ''; height: 90%; width: 1180px; background: rgba(255,255,255,1); position: absolute;top: 0; z-index: -1; border-radius: 16px; margin-left: -755px;}

#top3 p.image2{height: 400px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; top:1100px;}
#top3 p.image2::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 p.image2_inline{height: 375px; width: 750px; position: absolute; left: 50%; bottom: 0; margin-left: -375px; z-index: 200; top:1110px;}
#top3 p.image2_inline a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/thumb_top2.jpg) center center no-repeat; position: absolute; left:0; top: 0;}
#top3 p.comment_author2{height: 100px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; font-size:24px; letter-spacing: 0.1em; line-height:2em; color:#000; top:1500px;}
#top3 p.comment_author2::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 p.comment2_inline{height: 420px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200;font-size:16px; letter-spacing: 0.1em; line-height:1.5em; padding:20px; top:1550px;}
#top3 p.comment2_inline::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 p.comment2_inline::after{content: ''; height: 90%; width: 1180px; background: rgba(255,255,255,1); position: absolute;top: 0; z-index: -1; border-radius: 16px; margin-left: -720px;}

#top3 p.image3{height: 400px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; top:1960px;}
#top3 p.image3::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 p.image3_inline{height: 375px; width: 750px; position: absolute; left: 50%; bottom: 0; margin-left: -375px; z-index: 200; top:1970px;}
#top3 p.image3_inline a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/thumb_top3.jpg) center center no-repeat; position: absolute; left:0; top: 0;}
#top3 p.comment_author3{height: 100px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; font-size:24px; letter-spacing: 0.1em; line-height:2em; color:#000; top:2360px;}
#top3 p.comment_author3::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 p.comment3_inline{height: 310px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200;font-size:16px; letter-spacing: 0.1em; line-height:1.5em; padding:20px; top:2410px;}
#top3 p.comment3_inline::before{content: ''; height: 100%; width: 100%; background: rgba(255,241,92,1); position: absolute; left: 0; top: 0; z-index: -1;}
#top3 p.comment3_inline::after{content: ''; height: 90%; width: 1180px; background: rgba(255,255,255,1); position: absolute;top: 0; z-index: -1; border-radius: 16px; margin-left: -870px;}

#top3 img.mark_comment{margin:-8px;}

#top3 a:hover {filter: brightness(1.2); height: 375px; width: 100%; position: absolute; left: 0; top:0;}
.ie #top3 a:hover {opacity: 0.7; height: 375px; width: 100%; position: absolute; left: 0; top:13px;}

/* select_work */
#select_work {height: 400px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; top:3920px;}
#select_work h2 {position: relative; background: url(../images/title_select_work_0618.png) center top no-repeat; height: 100px; top:0; left:0;}

#select_work p.work01{height: 180px; width: 300px; position: absolute; right: 50%; top: 100px; margin-right: 320px;}
#select_work p.work01 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_01.jpg) center center no-repeat; position: absolute; left: 0;}
#select_work p.work02{height: 180px; width: 300px; position: absolute; right: 50%; top: 100px; margin-right: 20px;}
#select_work p.work02 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_02.jpg) center center no-repeat; position: absolute; left: 0;}
#select_work p.work03{height: 180px; width: 300px; position: absolute; right: 50%; top: 100px; margin-right: -280px;}
#select_work p.work03 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_03.jpg) center center no-repeat; position: absolute; left: 0;}
#select_work p.work04{height: 180px; width: 300px; position: absolute; right: 50%; top: 100px; margin-right: -580px;}
#select_work p.work04 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_04.jpg) center center no-repeat; position: absolute; left: 0;}

#select_work p.work05{height: 180px; width: 300px; position: absolute; right: 50%; top: 280px; margin-right: 320px;}
#select_work p.work05 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_05.jpg) center center no-repeat; position: absolute; left: 0;}
#select_work p.work06{height: 180px; width: 300px; position: absolute; right: 50%; top: 280px; margin-right: 20px;}
#select_work p.work06 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_06.jpg) center center no-repeat; position: absolute; left: 0;}
#select_work p.work07{height: 180px; width: 300px; position: absolute; right: 50%; top: 280px; margin-right: -280px;}
#select_work p.work07 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_07.jpg) center center no-repeat; position: absolute; left: 0;}
#select_work p.work08{height: 180px; width: 300px; position: absolute; right: 50%; top: 280px; margin-right: -580px;}
#select_work p.work08 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_08.jpg) center center no-repeat; position: absolute; left: 0;}

#select_work p.work09{height: 180px; width: 300px; position: absolute; right: 50%; top: 460px; margin-right: 320px;}
#select_work p.work09 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_09.jpg) center center no-repeat; position: absolute; left: 0;}
#select_work p.work10{height: 180px; width: 300px; position: absolute; right: 50%; top: 460px; margin-right: 20px;}
#select_work p.work10 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_10.jpg) center center no-repeat; position: absolute; left: 0;}
#select_work p.work11{height: 180px; width: 300px; position: absolute; right: 50%; top: 460px; margin-right: -280px;}
#select_work p.work11 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_11.jpg) center center no-repeat; position: absolute; left: 0;}
#select_work p.work15{height: 180px; width: 300px; position: absolute; right: 50%; top: 460px; margin-right: -580px;}
#select_work p.work15 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_15.jpg) center center no-repeat; position: absolute; left: 0;}

#select_work p.note{position: absolute; font-size:16px; width:1920px; letter-spacing: 0.1em; text-align:center; line-height:1.5em; top:660px;}

#select_work a:hover {filter: brightness(1.2); height: 180px; width: 100%; position: absolute; left: 0;}
.ie #select_work a:hover {opacity: 0.7; height: 180px; width: 100%; position: absolute; left: 0;}

/* cos */
#cos {width: 100%; height:1050px; top:3060px;}
#cos h2{height: 200px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; top:0;}
#cos h2::before{content: ''; height: 100%; width: 100%; background: rgba(219,0,87,1); position: absolute; left: 0; top: 0; z-index: -1;}
#cos h2::after{content: ''; height: 100%; width: 100%; background: url(../images/title_cos.png) center center no-repeat; position: absolute; left:0; top: 0;}
#cos p.image{height: 400px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; top:160px;}
#cos p.image::before{content: ''; height: 100%; width: 100%; background: rgba(219,0,87,1); position: absolute; left: 0; top: 0; z-index: -1;}
#cos p.image_inline{height: 375px; width: 750px; position: absolute; left: 50%; bottom: 0; margin-left: -375px; z-index: 200; top:170px;}
#cos p.image_inline a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/thumb_cos.jpg) center center no-repeat; position: absolute; left:0; top: 0;}
#cos p.comment_author{height: 100px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; font-size:24px; letter-spacing: 0.1em; line-height:2em; color:#fff; top:560px;}
#cos p.comment_author::before{content: ''; height: 100%; width: 100%; background: rgba(219,0,87,1); position: absolute; left: 0; top: 0; z-index: -1;}
#cos p.comment_inline{height: 370px; width: 1920px; position: absolute; left: 50%; bottom: 0; margin-left: -960px; z-index: 200; font-size:16px; letter-spacing: 0.1em; line-height:1.5em; padding:20px; top:610px;}
#cos p.comment_inline::before{content: ''; height: 100%; width: 100%; background: rgba(219,0,87,1); position: absolute; left: 0; top: 0; z-index: -1;}
#cos p.comment_inline::after{content: ''; height: 90%; width: 1180px; background: rgba(255,255,255,1); position: absolute; top: 0; z-index: -1; border-radius: 16px; margin-left: -1090px;}

#cos img.mark_comment{margin:-8px;}

#cos a:hover {filter: brightness(1.2); height: 375px; width: 100%; position: absolute; left: 0; top:0;}
.ie #cos a:hover {opacity: 0.7; height: 375px; width: 100%; position: absolute; left: 0; top:13px;}

/* note */
#note {width: 100%; height: 150px; top:3060px;}
#note p.text1{position: relative; font-size:24px; width:1300px; margin-bottom:40px; letter-spacing: 0.1em; text-align:center; line-height:1.5em;}
#note p.text2{position: relative; font-size:16px; width:1300px; margin-bottom:40px; letter-spacing: 0.1em; text-align:center; line-height:1.5em;}

/* other_work */
#other_work {width: 100%; height: 1230px; background: rgba(237,237,237,1); padding: 40px 0; top:3080px;}
#other_work h2 {position: relative; background: url(../images/title_other_work.png) center top no-repeat; height: 107px; top:0; left:0; z-index: 100;}
#other_work p.works {position: relative; background: url(../images/work/other_works.jpg) center top no-repeat; height: 1024px; top:20px; left:0;}

/* tweet */
main article {position: relative; height: 740px; margin-left: 11px; margin-top: 3080px;}
main article::after{content: ''; width: 1260px; height: 100%; background-position: center top; background-repeat: no-repeat; position: absolute; left: 50%; top: 0; margin-left: -635px; background-image: url(../images/tweet.png);}

main article p.btn1{position: absolute; left: 50%; bottom: 270px; margin-left: -480px; z-index: 10; width: 960px; height: 180px; background-image: url(../images/btn-tweet_0507.png);}
main article p.btn2{position: absolute; left: 50%; bottom: 85px; margin-left: -250px; z-index: 10; width: 500px; height: 160px; }
main article p.btn2 a {display: block; background-repeat: no-repeat; background-position: center center; background-image: url(../images/btn-watch.png); height: 100%; transition: 0.3s;}
main article p.btn2 a:hover{filter: brightness(1.6);}
.ie main article p.btn2 a:hover{opacity: 0.7;}

/* flow */
h2.flow-title{position: relative; font-size:36px; height: 100px; width:1920px; margin-left: -310px; margin-bottom: 40px; letter-spacing: 0.1em; text-align:center; font-weight: bold; line-height:3em; color:#fff;}
h2.flow-title::before{content: ''; height: 100%; width: 100%; background: rgba(255,95,116,1); position: absolute; left: 0; top: 0; z-index: -1;}

#flow {width: 1000px; left: 50%; margin-left:150px; font-weight: bold;}
#flow li.flow1{position: relative; font-size:30px; height: 160px; width:1000px; letter-spacing: 0.1em; text-align:center; line-height:1.2em; display: flex; align-items: center; justify-content: center;}
#flow li.flow1::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 16px; background-color: #fff15c;}
#flow li.flow1::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 130px;}
#flow li.flow2{position: relative; font-size:30px; height: 160px; width:1000px; margin:90px auto; letter-spacing: 0.1em; text-align:center; line-height:1.2em; display: flex; align-items: center; justify-content: center;}
#flow li.flow2::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 16px; background-color: #fff15c;}
#flow li.flow2::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 130px;}
#flow li.flow3{position: relative; font-size:40px; color:#fff; height: 130px; width:1000px; margin:90px auto; letter-spacing: 0.1em; text-align:center; line-height:1em; display: flex; align-items: center; justify-content: center;}
#flow li.flow3::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 16px; background-color: #ffc75c;}
#flow li.flow3::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 110px;}
#flow li.flow4{position: relative; font-size:30px; height: 90px; width:1000px; margin:90px auto; letter-spacing: 0.1em; text-align:center; line-height:1em; display: flex; align-items: center; justify-content: center;}
#flow li.flow4::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 16px; background-color: #fff15c;}
#flow li.flow4::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 90px;}
#flow li.flow5{position: relative; font-size:30px; height: 90px; width:1000px; margin:90px auto; letter-spacing: 0.1em; text-align:center; line-height:1em; display: flex; align-items: center; justify-content: center;}
#flow li.flow5::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 16px; background-color: #fff15c;}
#flow li.flow5::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 90px;}
#flow li.flow6{position: relative; font-size:40px; color:#fff; height: 130px; width:1000px; margin:90px auto; letter-spacing: 0.05em; text-align:center; line-height:1em; display: flex; align-items: center; justify-content: center;}
#flow li.flow6::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 16px; background-color: #ffc75c;}

/* guideline */
h2.guideline-title{position: relative; font-size:36px; height: 100px; width:1920px; margin-left: -310px; margin-bottom: 40px; letter-spacing: 0.1em; text-align:center; font-weight: bold; line-height:3em; color:#fff;}
h2.guideline-title::before{content: ''; height: 100%; width: 100%; background: rgba(255,95,116,1); position: absolute; left: 0; top: 0; z-index: -1;}

#guideline-point {position: relative; height: 100%; width:1000px; left: 50%; margin-left:-500px; padding:40px; background-color: #ededed;}
#guideline-point p{font-size:18px; letter-spacing: 0.05em; text-align:left;  line-height:1.5em; margin-bottom:40px;}
#guideline-point p.title{font-size:24px; letter-spacing: 0.1em; text-align:left; font-weight: bold; color:#ff3751; margin-bottom:10px;}

#agreement {position: relative; height: 100%; width:920px; left: 50%; margin-left:-460px; padding:40px; background-color: #fff;}
#agreement p{font-size:18px; letter-spacing: 0.05em; text-align:left; line-height:1.5em; margin-bottom:40px;}
#agreement p.title{font-size:24px; letter-spacing: 0.1em; text-align:left; font-weight: bold; color:#005a5b; margin-bottom:10px;}
#agreement p.last{font-size:18px; letter-spacing: 0.05em; text-align:left; line-height:1.5em; margin-bottom:0;}
}

/* sp
__________________________________________________*/
@media screen and (max-width:640px){

.pc-item{display:none;}
.sp-item{display: inline-block;}

#sgsContents::after{content: ''; background: url(../images/sp/mv.jpg) center top no-repeat; width: 100%; position: absolute; left: 0; top: 16.1vw; z-index: 0; height:206.25vw; background-size: 100% auto;}
#sgsContents main {min-height: 640px;}

/* mainVisual */
#mainVisual {width: 100%; height: 135vw; padding: 16vw 0 0;}
#mainVisual h1 {position: relative; z-index: 100; background: url(../images/sp/h1.png) center top no-repeat; height:46.875vw; background-size: 75% auto; margin: 56vw 0 70vw;}
#mainVisual p.copy{position: relative; background: url(../images/sp/copy_0618.png) center top no-repeat; height: 50vw; background-size: 100% auto; top:-95vw;}
#mainVisual p.date{position: relative; background: url(../images/sp/date_0530.png) center top no-repeat; height: 31.25vw; background-size: 100% auto; top:-120vw;}

/* top3 */
#top3 {width: 100%; height: 610vw;}
#top3 h2{position: relative; background: url(../images/sp/title_top3.png) center top no-repeat; height: 50vw; background-size: 100% auto; top:0}
#top3 p.image1_inline{position: relative; background: url(../images/sp/thumb_top1.jpg) center top no-repeat; height: 80vw; left:0; background-size: 100% auto; top:-30vw;}
#top3 p.image1_inline a::after{content: ''; height: 100%; width: 100%; position: absolute; left:0;}
#top3 p.comment_author1{position: relative; height: 14vw; background: rgba(255,241,92,1); top:-60vw;}
#top3 span.comment_author1_inline{position: relative; font-size: 4vw; letter-spacing: 0.1em; text-align:center; line-height:1.5em; top:4vw;}
#top3 p.comment1{position: relative; height: 200vw; background: rgba(255,241,92,1); top:-60vw;}
#top3 p.comment1_inline{position: relative; width: 90%; left:5%; font-size: 3.5vw; letter-spacing: 0.05em; text-align:center; line-height:1.5em; padding:4vw; border-radius: 3vw; background-color: #fff; top:-260vw; text-align: left;}

#top3 p.image2_inline{position: relative; background: url(../images/sp/thumb_top2.jpg) center top no-repeat; height: 80vw; left:0; background-size: 100% auto; top:-255vw;}
#top3 p.image2_inline a::after{content: ''; height: 100%; width: 100%; position: absolute; left:0;}
#top3 p.comment_author2{position: relative; height: 14vw; background: rgba(255,241,92,1); top:-285vw;}
#top3 span.comment_author2_inline{position: relative; font-size: 4vw; letter-spacing: 0.1em; text-align:center; line-height:1.5em; top:4vw;}
#top3 p.comment2{position: relative; height: 170vw; background: rgba(255,241,92,1); top:-285vw;}
#top3 p.comment2_inline{position: relative; width: 90%; left:5%; font-size: 3.5vw; letter-spacing: 0.05em; text-align:center; line-height:1.5em; padding:4vw; border-radius: 3vw; background-color: #fff; top:-455vw; text-align: left;}

#top3 p.image3_inline{position: relative; background: url(../images/sp/thumb_top3.jpg) center top no-repeat; height: 80vw; left:0; background-size: 100% auto; top:-448vw;}
#top3 p.image3_inline a::after{content: ''; height: 100%; width: 100%; position: absolute; left:0;}
#top3 p.comment_author3{position: relative; height: 14vw; background: rgba(255,241,92,1); top:-478vw;}
#top3 span.comment_author3_inline{position: relative; font-size: 4vw; letter-spacing: 0.1em; text-align:center; line-height:1.5em; top:4vw;}
#top3 p.comment3{position: relative; height: 110vw; background: rgba(255,241,92,1); top:-478vw;}
#top3 p.comment3_inline{position: relative; width: 90%; left:5%; font-size: 3.5vw; letter-spacing: 0.05em; text-align:center; line-height:1.5em; padding:4vw; border-radius: 3vw; background-color: #fff; top:-588vw; text-align: left;}

#top3 img.mark_comment{margin:-8px;}

/* select_work */
#select_work {width: 100%; height: 570vw;}
#select_work h2 {position: relative; background: url(../images/title_select_work_0618.png) center top no-repeat; height:10vw; background-size: 100% auto; top:-3vw;}

#select_work p.work01 {position: relative; background: url(../images/work/select_work_thumb_01.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work01 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_01.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work02 {position: relative; background: url(../images/work/select_work_thumb_02.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work02 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_02.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work03 {position: relative; background: url(../images/work/select_work_thumb_03.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work03 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_03.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work04 {position: relative; background: url(../images/work/select_work_thumb_04.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work04 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_04.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work05 {position: relative; background: url(../images/work/select_work_thumb_05.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work05 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_05.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work06 {position: relative; background: url(../images/work/select_work_thumb_06.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work06 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_06.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work07 {position: relative; background: url(../images/work/select_work_thumb_07.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work07 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_07.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work08 {position: relative; background: url(../images/work/select_work_thumb_08.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work08 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_08.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work09 {position: relative; background: url(../images/work/select_work_thumb_09.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work09 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_09.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work10 {position: relative; background: url(../images/work/select_work_thumb_10.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work10 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_10.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work11 {position: relative; background: url(../images/work/select_work_thumb_11.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work11 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_11.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}
#select_work p.work15 {position: relative; background: url(../images/work/select_work_thumb_15.jpg) center top no-repeat; height:45vw; background-size: 75% auto;}
#select_work p.work15 a::after{content: ''; height: 100%; width: 100%; background: url(../images/work/select_work_thumb_15.jpg) center center no-repeat;  background-size: 75% auto; position: absolute; left: 0;}

#select_work p.note{position: relative; font-size: 3vw; width: 94vw; margin-left: 2vw; margin-bottom: 5vw; letter-spacing: 0.1em; text-align:center; line-height:1.5em; top:5vw}

/* cos */
#cos {width: 100%; height: 225vw;}
#cos h2{position: relative; background: url(../images/sp/title_cos.png) center top no-repeat; height: 30vw; background-size: 100% auto; top:0;}
#cos p.image_inline {position: relative; background: url(../images/sp/thumb_cos.jpg) center top no-repeat; height: 80vw; top:0; left:0; background-size: 100% auto; top:-12vw;}
#cos p.image_inline a::after{content: ''; height: 100%; width: 100%; position: absolute; left:0;}
#cos p.comment_author{position: relative; height: 14vw; background: rgba(219,0,87,1); top:-42vw;}
#cos span.comment_author_inline{position: relative; font-size: 4vw; letter-spacing: 0.1em; text-align:center; line-height:1.5em; top:4vw; color:#fff;}
#cos p.comment{position: relative; height: 135vw; background: rgba(219,0,87,1); top:-42vw;}
#cos p.comment_inline{position: relative; width: 90%; left:5%; font-size: 3.5vw; letter-spacing: 0.05em; text-align:center; line-height:1.5em; padding:4vw; border-radius: 3vw; background-color: #fff; top:-177vw; text-align: left;}

#cos img.mark_comment{margin:-8px;}

/* note */
#note {width: 100%; height: 30vw;}
#note p.text1{position: relative; font-size: 4vw; width: 94vw; margin-left: 2vw; margin-bottom: 5vw; letter-spacing: 0.1em; text-align:center; line-height:1.5em;}
#note p.text2{position: relative; font-size: 3vw; width: 86vw; margin-left: 6vw; margin-bottom: 5vw; letter-spacing: 0.1em; text-align:center; line-height:1.5em; text-align: left;}

/* other_work */
#other_work {width: 100%; height: 112vw; background: rgba(237,237,237,1);}
#other_work h2 {position: relative; background: url(../images/title_other_work.png) center top no-repeat; height:12vw; background-size: 85% auto; top:5vw;}
#other_work p.works {position: relative; background: url(../images/work/other_works.jpg) center top no-repeat; height: 1024px; top:20px; left:0; background-size: 90% auto}

/* tweet */
main article {position: relative; height: 70vw; margin-left: 0; z-index: 100;}
main article::after{content: ''; width: 100%; height: 100%; background-position: center top; background-repeat: no-repeat; position: absolute; left: 0; top: 0; background-image: url(../images/sp/tweet.png); background-size: 100% auto;}

main article p.btn1{position: absolute; left: 50%; bottom: 26vw; margin-left: -149.5vw; z-index: 200; width: 300vw; height: 16.875vw; background-repeat: no-repeat; background-position: center center;  background-image: url(../images/btn-tweet_0507.png); background-size: 30% auto;}
main article p.btn2{position: absolute; left: 50%; bottom: 8vw; margin-left: -78.125vw; z-index: 10; width: 156.25vw; height: 15vw;}
main article p.btn2 a {display: block; background-repeat: no-repeat; background-position: center center; background-image: url(../images/btn-watch.png); height: 100%; background-size: 30% auto;}

/* flow */
h2.flow-title{position: relative; font-size: 6.5vw; height: 13vw; width: 178vw; margin-left: -39vw; margin-bottom: 5vw; letter-spacing: 0.01em; text-align:center; font-weight: bold; line-height: 2.2em; color:#fff;}
h2.flow-title::before{content: ''; height: 100%; width: 100%; background: rgba(255,95,116,1); position: absolute; left: 0; top: 0; z-index: -1;}

#flow {position: relative; width: 90vw; margin-left: 5vw; font-weight: bold;}
#flow li.flow1{position: relative; font-size: 4.5vw; height: 32vw; width: 90vw; letter-spacing: 0.1em; text-align:center; line-height:1.2em; display: flex; align-items: center; justify-content: center;}
#flow li.flow1::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 3vw; background-color: #fff15c;}
#flow li.flow1::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 26vw; background-size: 50% auto;}
#flow li.flow2{position: relative; font-size: 4.5vw; height: 32vw; width: 90vw; margin: 20vw auto; letter-spacing: 0.1em; text-align:center; line-height:1.2em; display: flex; align-items: center; justify-content: center;}
#flow li.flow2::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 3vw; background-color: #fff15c;}
#flow li.flow2::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 26vw; background-size: 50% auto;}
#flow li.flow3{position: relative; font-size: 6vw; color:#fff; height: 80px; width: 90vw; margin: 20vw auto; letter-spacing: 0.1em; text-align:center; line-height:1.2em; display: flex; align-items: center; justify-content: center;}
#flow li.flow3::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 3vw; background-color: #ffc75c;}
#flow li.flow3::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 21vw; background-size: 50% auto;}
#flow li.flow4{position: relative; font-size: 4.5vw; height: 20vw; width: 90vw; margin: 20vw auto; letter-spacing: 0.1em; text-align:center; line-height:1.2em; display: flex; align-items: center; justify-content: center;}
#flow li.flow4::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 3vw; background-color: #fff15c;}
#flow li.flow4::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 20vw; background-size: 50% auto;}
#flow li.flow5{position: relative; font-size: 4.5vw; height: 20vw; width: 90vw; margin: 20vw auto; letter-spacing: 0.1em; text-align:center; line-height:1.2em; display: flex; align-items: center; justify-content: center;}
#flow li.flow5::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 3vw; background-color: #fff15c;}
#flow li.flow5::after{content: ''; height: 100%; width: 100%; background: url(../images/arrow.png) center center no-repeat; position: absolute; left:0; top: 20vw; background-size: 50% auto;}
#flow li.flow6{position: relative; font-size: 6vw; color:#fff; height: 25vw; width: 90vw; margin: 10vw auto; letter-spacing: 0.05em; text-align:center; line-height:1.2em; display: flex; align-items: center; justify-content: center;}
#flow li.flow6::before{content: ''; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: -1; border-radius: 3vw; background-color: #ffc75c;}

/* guideline */
h2.guideline-title{position: relative; font-size: 6.5vw; height: 13vw; width: 178vw; margin-left: -39vw; margin-bottom: 5vw; letter-spacing: 0.1em; text-align:center; font-weight: bold; line-height: 2.2em; color:#fff;}
h2.guideline-title::before{content: ''; height: 100%; width: 100%; background: rgba(255,95,116,1); position: absolute; left: 0; top: 0; z-index: -1;}

#guideline-point {position: relative; height: 100%; width: 94vw; left: 50%; margin-left: -47vw; padding: 5vw; background-color: #ededed;}
#guideline-point p{font-size: 4vw; letter-spacing: 0.05em; text-align:left;  line-height:1.5em; margin-bottom: 6.25vw;}
#guideline-point p.title{font-size: 5vw; letter-spacing: 0.1em; text-align:left; font-weight: bold; color:#ff3751; margin-bottom: 1.5625vw;}

#agreement {position: relative; height: 100%; width: 88vw; left: 50%; margin-left: -44vw; padding: 5vw; background-color: #fff;}
#agreement p{font-size: 4vw; letter-spacing: 0.05em; text-align:left; line-height:1.5em; margin-bottom: 6.25vw;}
#agreement p.title{font-size: 5vw; letter-spacing: 0.1em; text-align:left; font-weight: bold; color:#005a5b; margin-bottom: 1.5625vw;}
#agreement p.last{font-size: 4vw; letter-spacing: 0.05em; text-align:left; line-height:1.5em; margin-bottom:0;}
}