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

 ■■■  ■                    ■                   
■     ■                    ■                   
■    ■■■■ ■ ■ ■   ■   ■■■ ■■■■ ■   ■  ■ ■  ■■■ 
 ■■   ■   ■■  ■   ■  ■■ ■  ■   ■   ■  ■■  ■  ■ 
  ■■■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■   ■
    ■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■■■■■
■   ■ ■   ■   ■  ■■  ■■    ■   ■  ■■  ■   ■    
■■■■  ■■  ■    ■■ ■   ■■■  ■■   ■■ ■  ■    ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- fonts ---- */

body{ color: #000; background:#fff url("../images/bg-pattern.png") repeat center top; background-size: calc(1280/3000*100vw) auto;  }


/* common */
.lo-part,.lo-cont{ position: relative; width: 100%; display: block; }
.part-body{ position: relative; background-color: transparent; max-width: 1000px; padding: 0; margin: 0 auto; overflow: visible; }
.part-body > .inner{ background: url("../images/main-back.png") no-repeat center 1em; background-size: 95%; }

.cont-title{ width: 100%; padding: 1.4em 0; color:#FFF; text-align: center; background: #a3003e; position: relative; margin: 0 ; z-index: 2; }
.cont-title > h2{ font-size: 1.8em; margin: 0; font-weight: 900; letter-spacing: .1em; line-height: 1; }

.cont-title2{ width: 90%; padding: .5em 0; color:#f48fc2; text-align: center; background:#FFF ; position: relative;  margin: 0 auto; border-radius: 1em; }
.cont-title2 > h2{ font-size: 1.1em; margin: 0; font-weight: 900; letter-spacing: .1em; line-height: 1.3; }

.btn-a{ display: inline-block; padding: 0.6em .6em 0.6em .6em ; border:#e5005a solid 2px ; border-radius:.25em; text-decoration: none; font-size: 1em; font-weight: bold; line-height: 1; }
.btn-a:before{ content:"▶︎ "; }
.btn-a,
.btn-a:visited,
.btn-a:active{ color: #e5005a; background-color: #fff; }
.btn-a:hover{ text-decoration: none; background-color: #e5005a; color: #fff; }


/* part */
.cont-block1{ position: relative; margin-bottom: 2em; }
.cont-block1 .header{ width: 100%; margin: 0 auto; padding: 3em 0 15em 0; }
.cont-block1 .header .logo{ width: 30%; margin: 0 auto 11em auto; }
.cont-block1 .header .main-ttl{ width: 60%; margin: 0 auto 2em auto; }
.cont-block1 .header .title{ font-size: 5.5em; font-weight: 900; letter-spacing: .1em; text-align: center; margin-bottom: .5em; filter: drop-shadow( 2px 2px 0 #e4007f); }
.cont-block1 .header .lead{ font-size: 3.25em; color:#a3003e; font-weight: normal; font-style: italic; letter-spacing: .1em; text-align: center; margin-bottom: 3.0em; }
.cont-block1 .header .main{ width: 80%; margin: 0 auto; position: relative; transform: rotate(5deg); filter: drop-shadow( 0 0 1em #000); }

.cont-block2{ position: relative; margin-bottom: 0; }
.cont-block2 .inner{ background: #fff; padding: 2em; }
.scene-list-container{ position: relative; padding: 1em; }
ul.scene-list{ width: 100%; display: block; text-align: center; padding: 0 ; margin: 0 auto 1em auto; }
ul.scene-list li{ display: inline-block; width: 33%; padding: 0; margin: 0; color:#e4007f; text-align: center; }
ul.scene-list label{ margin: 0; }
ul.scene-list .thcont{ line-height: 1; padding: 1em; }
.scene-radio{ display: none; }
.scene-radio:checked + .thcont{ background-color: #e4007f; }
ul.scene-ui{ font-size: 1.25em; display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; padding: 0 .5em; margin: 0 auto 1em auto; }
ul.scene-ui > li{ padding: 0 1em; margin: 0; color:#a3003e; text-align: center; }
ul.scene-ui > li span{ font-size: 1.5em; cursor: pointer; }
ul.scene-ui > li.slick-disabled{ opacity: .3; }


.cont-block3{ position: relative; margin-bottom: 0; }
.cont-block3 .inner{ background: #fff; padding: 4em; }
.comment-container{ padding: 0 14.5%; margin-bottom: 2em; }
.comment-container textarea{ width: 100%; height: 5em; padding: 1em; color:#000; border-color: #000; resize: none; font-family:sans-serif; font-weight: normal; font-size: 2em; }
.comment-btn{ font-size: 1.4em; margin-bottom: 0; }


.cont-block4{ padding: 0; position: relative; margin-bottom: 0; }
.cont-block4 .inner{ background: #a3003e; padding: 0em 4em 0em 4em; }
/* .canvas-container{ position: relative; height: 20em; }
.canvas-preview{ position: absolute; top:0; transform-origin: left top; pointer-events: all; }
.canvas-container[data-tmpl="yoko"]{ height: 20em; }
.canvas-container[data-tmpl="yoko"] .canvas-preview{ top:1.0em; left: 1.0em; }
.canvas-container[data-tmpl="tate"]{ height: 25em; }
.canvas-container[data-tmpl="tate"] .canvas-preview{ top:0em; left: 4.0em; } */
.canvas-container{ position: relative; text-align: center; }
.canvas-container{ background-color: #FFF; padding: 2em; margin-bottom: 0; }
.canvas-preview{ position: relative; margin: 0 auto; display: none; }
.canvas-image{ position: relative; margin: 0 auto; }
.canvas-text{ background-color: #FFF; position: relative; padding: 1em; margin: 0 auto; text-align: center; }
.canvas-text .main{ font-size: 1.4em;  }
.canvas-text .att{ font-size: 1em;  }
.canvas-text .file-name-cont{ font-size: 1.4em; text-align: center; margin-bottom: 1.5em; }
.canvas-text .file-name-cont span{ font-size: 1em; }
.canvas-text .file-name-btn{ font-size: 1.4em; margin-bottom: 0; }


.cont-block5{ padding: 0; position: relative; margin-bottom: 0; }
.cont-block5 .inner{ background: #a3003e; padding: 0em 4em 4em 4em; }
.tweet-text{ background-color: #FFF; position: relative; padding: 1em; margin: 0 auto; text-align: center; }
.tweet-text .tweet-btn{ font-size: 1.4em; margin-bottom: 0; }
.tweet-text .main{ font-size: 1.4em;  }
.tweet-text .att{ font-size: 1em;  }

.copyrihgt{ text-align: center; font-size: 1em; margin-bottom: 0; padding: 1em 0; }


/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

                     ■                                                     
 ■■    ■■            ■  ■             ■■■                     ■            
 ■■    ■■            ■               ■   ■                                 
 ■■■  ■ ■   ■■■   ■■■■  ■  ■■■      ■     ■  ■   ■   ■■■  ■ ■ ■   ■■■  ■■■ 
 ■ ■  ■ ■  ■  ■  ■■ ■■  ■  ■  ■     ■     ■  ■   ■  ■  ■  ■■  ■  ■  ■  ■   
 ■ ■  ■ ■  ■   ■ ■   ■  ■   ■■■     ■     ■  ■   ■  ■   ■ ■   ■  ■   ■ ■■  
 ■  ■■  ■  ■■■■■ ■   ■  ■ ■■  ■     ■     ■  ■   ■  ■■■■■ ■   ■  ■■■■■   ■■
 ■  ■■  ■  ■     ■■ ■■  ■ ■   ■      ■  ■■   ■  ■■  ■     ■   ■  ■        ■
 ■      ■   ■■■   ■■■■  ■  ■■■■       ■■■■■   ■■ ■   ■■■  ■   ■   ■■■  ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/

@media (min-width:1000px) {
body{ font-size: 10px; }
}

@media (max-width: 767px) {
body{ background-size: 100%; }

/* common */
.lo-part,.lo-cont{ position: relative; width: 100%; display: block; }
.part-body{ position: relative; background-color: transparent; max-width: 1000px; padding: 0; margin: 0 auto; overflow: visible; }
.part-body > .inner{  }

.cont-title{ width: 100%; padding: 1.4em 0; color:#FFF; text-align: center; background: #a3003e; position: relative; margin: 0 ; z-index: 2; }
.cont-title > h2{ font-size: 1.8em; margin: 0; font-weight: 900; letter-spacing: .1em; line-height: 1; }

.cont-title2{ width: 90%; padding: .5em 0; color:#f48fc2; text-align: center; background:#FFF ; position: relative;  margin: 0 auto; border-radius: 1em; }
.cont-title2 > h2{ font-size: 1.1em; margin: 0; font-weight: 900; letter-spacing: .1em; line-height: 1.3; }

.btn-a{ display: inline-block; padding: 0.6em .6em 0.6em .6em ; border:#e5005a solid 2px ; border-radius:.25em; text-decoration: none; font-size: 1em; font-weight: bold; line-height: 1; }
.btn-a:before{ content:"▶︎ "; }
.btn-a,
.btn-a:visited,
.btn-a:active{ color: #e5005a; background-color: #fff; }
.btn-a:hover{ text-decoration: none; background-color: #e5005a; color: #fff; }


/* part */
.cont-block1 .header{ width: 100%; margin: 0 auto; padding: 1.5em 0 5em 0; }
.cont-block1 .header .logo{ width: 37%; margin: 0 auto 2.0em auto; }
.cont-block1 .header .main-ttl{ width: 65%; margin: 0 auto 1em auto; }
.cont-block1 .header .title{ font-size: 2.2em; margin-bottom: .4em;  }
.cont-block1 .header .lead{ font-size: 1.5em; margin-bottom: 2.5em; }
.cont-block1 .header .main{ width: 85%; filter: drop-shadow( 0 0 .5em #000); }


.cont-block2{  margin-bottom: 0; }
.cont-block2 .inner{ padding: 1em 0; }
.scene-list-container{ padding: 0; }
ul.scene-list li{ width: 32%; }
ul.scene-list .thcont{ padding: .5em; }


.cont-block3{ margin-bottom: 0; }
.cont-block3 .inner{ padding: 1em; }
.comment-container{ padding: 0 ; margin-bottom: 2em; }
.comment-container textarea{ font-size: 1.1em; }


.cont-block4{ margin-bottom: 0; }
.cont-block4 .inner{ padding: 0em 1em 0em 1em; }
.canvas-container{ padding: .5em; }
.canvas-text{  padding: 1em; }


.cont-block5{ margin-bottom: 1em; }
.cont-block5 .inner{ padding: 0em 1em 1em 1em; }


.copyrihgt{ text-align: center; font-size: .8em; margin-bottom: 0; padding: 1em 0; }

}