@charset "UTF-8";

html, button, input, select, textarea {
    color: #20110D;
}

html {
    font-size: 62.5%;
    line-height: 2;
}

html, body {
    background: #fff;
}

::-moz-selection {
    background: #bba110;
    text-shadow: none;
}

::selection {
    background: #bba110;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio, canvas, img, video, iframe {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

h1, h2, h3, p, ul, dl, dd {
    margin: 0;
}

dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}


a {
    color: inherit;
    text-decoration: inherit;
}

* , * ::before, * ::after {
    box-sizing: border-box;
}

.sp {
    display: none;
}

@media only screen and (max-width: 640px) {
    html {
        font-size: 50%;
    }

    .sp {
        display: block;
    }

    .pc {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   font
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100;
    src: url('../font/NotoSansCJKjp-Thin.eot');
    src: url('../font/NotoSansCJKjp-Thin.eot?#iefix') format('embedded-opentype'),
    url('../font/NotoSansCJKjp-Thin.woff') format('woff'),
    url('../font/NotoSansCJKjp-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 200;
    src: url('../font/NotoSansCJKjp-Light.eot');
    src: url('../font/NotoSansCJKjp-Light.eot?#iefix') format('embedded-opentype'),
    url('../font/NotoSansCJKjp-Light.woff') format('woff'),
    url('../font/NotoSansCJKjp-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../font/NotoSansCJKjp-DemiLight.eot');
    src: url('../font/NotoSansCJKjp-DemiLight.eot?#iefix') format('embedded-opentype'),
    url('../font/NotoSansCJKjp-DemiLight.woff') format('woff'),
    url('../font/NotoSansCJKjp-DemiLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../font/NotoSansCJKjp-Regular.eot');
    src: url('../font/NotoSansCJKjp-Regular.eot?#iefix') format('embedded-opentype'),
    url('../font/NotoSansCJKjp-Regular.woff') format('woff'),
    url('../font/NotoSansCJKjp-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../font/NotoSansCJKjp-Medium.eot');
    src: url('../font/NotoSansCJKjp-Medium.eot?#iefix') format('embedded-opentype'),
    url('../font/NotoSansCJKjp-Medium.woff') format('woff'),
    url('../font/NotoSansCJKjp-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Kite One';
    font-style: normal;
    font-weight: 400;
    src: url('../font/KiteOne-Regular.eot');
    src: url('../font/KiteOne-Regular.eot?#iefix') format('embedded-opentype'),
    url('../font/KiteOne-Regular.woff') format('woff'),
    url('../font/KiteOne-Regular.ttf') format('truetype');
}



.fontSerif {
		font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}


@font-face {
font-family: YuGothicM;
src: local("Yu Gothic Medium");
}


.fontSanserif {
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}



body [lang="ja"] {
    color: #333;
	font-size: 2.9rem;
}




@media only screen and (max-width: 1023px) and (orientation: landscape) {

}



/* --------------------------------------------------------------------------
   font icomoon
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'icomoon';
  src:  url('../font/icomoon.eot?1xe7k1');
  src:  url('../font/icomoon.eot?1xe7k1#iefix') format('embedded-opentype'),
    url('../font/icomoon.ttf?1xe7k1') format('truetype'),
    url('../font/icomoon.woff?1xe7k1') format('woff'),
    url('../font/icomoon.svg?1xe7k1#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-display:before {
  content: "\e956";
}
.icon-mobile:before {
  content: "\e958";
}
.icon-point-up:before {
  content: "\ea03";
}
.icon-point-right:before {
  content: "\ea04";
}
.icon-point-down:before {
  content: "\ea05";
}
.icon-point-left:before {
  content: "\ea06";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-youtube2:before {
  content: "\ea9e";
}
.icon-line:before {
  content: "\e902";
}

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


#wrapper {
    z-index: 1;
    position: relative;
    width: 100%;
    min-width: 320px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 1.8rem;
    font-weight: 400;
    font-family: 'Noto Sans', sans-serif;

    max-width: 100rem;
    
    text-align: center;
}


@media only screen and (max-width: 640px) {
    #wrapper {
        font-weight: 500;
    }
}

section {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.noto-thin,
section.img .section-title,
section.img .section-txt,
.notes-title {
    font-weight: 100;
}

.noto-demiLight {
    font-weight: 300;
}

@media only screen and (max-width: 640px) {
    .noto-thin,
    section.img .section-title,
    section.img .section-txt,
    .notes-title {
        font-weight: 200;
    }

    .noto-demiLight {
        font-weight: 400;
    }
}

.kite-one,
[lang="en"] {
    font-family: 'Kite One', sans-serif;
    font-weight: 400;
    letter-spacing: .6em;
	font-size:1.3rem;
}

.upper {
    text-transform: uppercase;
}


/* ------
   effect
------ */

/* 1. Slide & FadeIn */
.effTop1Levi {
	transition: all 1.1s ease-in-out;
	transition-delay: 0.9s;
	transform: translateY(35%); 
	opacity: 0; 	
}
.effTop1Levi.delighter.started {
      transform: none;
      opacity: 1;
}

.effTop2Ttl {
	transition: all 0.4s ease-in-out;
	transition-delay: 1.3s;
	transform: translateY(20px); 
	transform: scale(3,3);
	opacity: 0;
}
.effTop2Ttl.delighter.started {
      transform: none;
      opacity: 1;
}

.effTop3Menu {
	transition: all .8s ease-in-out;
	transition-delay: 1.4s;
	opacity: 0;
	transform: translate(0,20px); 
}
.effTop3Menu.delighter.started {
      transform: none;
      opacity: 1;
}

img#kcs {
	transition: all 1.2s ease-in;
	transition-delay: .5s;
	transform: scale(5,5);
	opacity: 0.6;
}
img#kcs.delighter.started {
      transform: none;
      opacity: 0.2;
}

.effTtl1.delighter {
	transition: all .8s ease-in-out;
	opacity: 0;
	transform: rotateX(180deg); 
	transform: scale(3,3)
}
.effTtl1.delighter.started {
      transform: none;
      opacity: 1;
}


div.effP{
	height: 5rem
}


.effA.delighter {
	transition: all .6s ease-out;
	transition-delay: .0s;
	opacity: 0;
	transform: translate(0,40px); 
}
.effA.delighter.started {
	opacity: 1.0;
	transform: translate(0,0); 
}

.effB.delighter {
	transition: .4s;
	transition-delay: .0s;
	opacity: 0;
	transform: translate(200px,0); 
}
.effB.delighter.started {
	transition: .4s;
	transition-delay: .0s;
	opacity: 1.0;
	transform: translate(0,0); 
}

.effC.delighter {
	transition: .4s;
	transition-delay: .0s;
	opacity: 0;
	transform: translate(-200px,0); 
}
.effC.delighter.started {
	transition: .4s;
	transition-delay: 0s;
	opacity: 1.0;
	transform: translate(0,0); 
}




/* 2. Flip */
.eff2 {
	transition: .8s;
	opacity: 0;
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
}
.eff2Show {
	transition: .8s;
	opacity: 1.0;
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

/* 3. ZoomIn */
.eff3 {
	transition: .8s;
	opacity: 0;
	transform: scale(0, 0);
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
	-webkit-transform: scale(0, 0);
}
.eff3Show {
	transition: .8s;
	opacity: 1.0;
	transform: scale(1, 1);
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
	-webkit-transform: scale(1, 1);
}

.effContainer {
	margin: 0 auto;
}


/* ------
   header
------ */

body {
    background-color: #160F07;
}

#intro {
    background-color: #231816;
    background-image:url("../img/bgpt_02.png");
    background-size: 10%, contain;
    background-repeat: repeat;
    padding: 0;
}

#head {
    position: absolute;
    top:0;
    left: 0;
    right:0;
}

#logo {
    width: 14.2rem;
	position: absolute;
    top: 0;
    left: 0;
}

#sttl {
    width: 15.6rem;
	position: absolute;
    top: 1.3rem;
    left: 14.3rem;
}

#s10th {
    width: 7.4rem;
	position: absolute;
    top: 0;
    right: 0;
}

#kcs {
    width: 96%;
    margin: 3rem auto ;
    opacity: 0.5;
    z-index: 1;
}

#levi {
    width: 66%;
    position: absolute;
    top:14rem;
    left: -4rem;
}

#ttlin {
    width: 99%;
    position: absolute;
    top:28rem;
    bottom: 0;
    left: 0.5%;
    z-index: 90;
}

#intro {
    min-height: 45rem;
}


img#yomuBtn {
	width: 13rem;
	margin: 0 1.8rem 0 0;
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.8));   
	transition: 1.8s
}
#navArea {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}
#navAreaWrapper {
    width: 100%;
    height: 16rem;
	max-width: 100rem;
	margin: 0	auto;
    text-align: right;
}

a:hover {
    opacity: 0.8;	
}

/* ------
   Menu
------ */

#menu {
    background: url("../img/bgpt_02.png"), linear-gradient(to bottom, #231816, #C49A6D);
    background-size: 10%, cover;
	

}
#menu div#menuWraapper{
    display: flex;
    justify-content: space-between;
    padding: 3rem 0.8rem 6rem 0.8rem;	
}

#menu #btn1, #menu #btn2, #menu #btn3 {
    color: #fff;
    width: 30%;
    display: block;
    font-size: 70%;
    background-color: rgba(242,241,218,0.3);
    margin: 0 auto;
    padding: 1rem 0.2rem;
    line-height: 1.9em;
    border: 4px double rgba(35,24,22,0.5);
    border-radius: 0.8rem;
    
    -webkit-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.8));
    -moz-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.8));
    -ms-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.8));
    filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.8));
    
    animation: 0.9s jump infinite alternate linear;
}
@keyframes jump {
  to { transform: transtateY(0); }
  from { transform: translateY(4px); }
}
#menu a p {
    font-size: 130%;
    font-weight: bold;
    color: #FFF6DB;
}
#menu a span {
    color: #FFF;
}


/* ------
   About
------ */
#about {
    background: url("../img/bgpt_00.png"), linear-gradient(to bottom, #0C0605, #231816 30%, #C49A6D 76%);
    background-size: 10%, cover;
    padding: 0rem 0rem 0rem 0rem;
}
#aboutWrapper {
    background: url("../img/bgpt_src.png"), linear-gradient(to bottom, #0C0605, #231816 30%, #C49A6D 76%);
	background-blend-mode: overlay;
    background-size: 10%, cover;
	padding-bottom: 11rem;
}

#about #lead {
    font-weight: bold;
    padding: 0rem 1rem 10rem 1rem;
    margin: -4rem auto 10rem auto;
}
#about #lead p {
    color: #FFF6DB;
    margin: 0 auto 4rem auto;
}

#about #camp {
    width: 43rem;
    margin: 0 auto;
    padding: 0;
}
#about #ttlab {
    font-size: 200%;
    font-weight: bold;
    letter-spacing: -0.03em;
    color: #EB1E79;
    line-height: 1.1em;
    font-feature-settings: "palt" 1;
}
.ulY {
    font-size: 120%;
    background-color: #FAEC21;
    padding: 0.06rem 0.4rem;
    color: #000;
    font-feature-settings: "palt" 1;
    
}
.abt1 .fontSerif, .abt1b .fontSerif, .abt3 .fontSerif, .abt4 .fontSerif {
    font-size: 100%;
    
}

#about #ttlab .aTxt {
    font-size: 76%;
}
#about #ttlab .bTxt {
    color: #FFF;
    background-color: #EB1E79;
    padding: 0.04em 0.17em;
    margin: 0 0.2em;
}
#about #ttlabb {
    font-size: 90%;
    color: #FFF6DB;
    padding: 0.4em 0;
    line-height: 1.6em;
    width: 25em;
    margin: 1rem auto 8rem auto;
}

.balloon3-right-btm {
    margin: 0 auto;
    padding-left: 6.2rem;
    text-align: left;
}
.balloon3-right-btm p {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 0 0;
    padding: 1.25rem 0 0 0;
    width: 5rem;
    height: 5rem;
    line-height: 1.2rem;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 70%;
    background: #EB1E79;
    border-radius: 50%;
    box-sizing: border-box;
}
.balloon3-right-btm p:before {
    content: "";
    position: absolute;
    bottom: -0.3rem;
    right: -0.3rem;
    margin-top: 0rem;
    border: 0.4rem solid transparent;
    border-left: 1.3rem solid #EB1E79;
    z-index: 0;
    -webkit-transform: rotate(55deg);
    transform: rotate(55deg);
}


#about .abt0 {
    font-size: 120%;
    font-weight: bold;
    color: #FFF;
    line-height: 1.1em;
    margin: 10rem auto 14rem auto;    
}
#about .abt0 span{
    display: block;
}
#about .abt0 img{
    width: 11rem;
    margin: 1rem auto;
}

#about .abt1 {
    font-size: 210%;
    color: #FFF;
    margin: 0rem auto 1rem auto;
    line-height: 1.2em;
    font-feature-settings: "palt" 1;
}

#about .abt1Img {
    width: 90%;
    color:#FFF;
    margin: 0 auto;
	background-color:#D0AD38;
    mix-blend-mode:lighten;
}
#about .abt1Img2 {
    width: 90%;
    margin: 0  auto 3rem auto;
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
}

#about .abt1b {
    font-size: 210%;
    margin: 1rem auto 0 auto;
    line-height: 1.2em;
    font-feature-settings: "palt" 1;
}

#about .abt1bImg {
    width: 100%;
    color:#FFF;
    margin: 1rem auto;
    mix-blend-mode: lighten;
}
#about .abt1bImg2 {
    width: 24%;
    margin: 8rem  auto 1rem auto;
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
}



#about .abt2 {
    font-size: 100%;
    font-weight: bold;
    color: #FFF;
    line-height: 1em;
    margin: 16rem auto 16rem auto;
    width: 6em;
    height: 6em;
    padding: 2.5em 0;
    border: solid 2px #FFF;
    border-radius: 6em;
}

#about .abt3 {
    font-size: 180%;
    line-height: 1.2em;
    margin: 0 auto 3rem auto;
    font-feature-settings: "palt" 1;
}
#about .abt3Img {
    width: 60%;
    padding-top: 0rem;
    color:#FFF;
    margin: 0 auto 1rem auto;
    mix-blend-mode:screen;
}
#about .abt3b {
	font-size: 100%;
    line-height: 1.5em;
    margin: -1rem auto 8rem auto;
    background-color:rgba(29,161,242,.80);
	width: 22em;
	padding: 1.3rem 1rem;
	color: #FFF;
	border: solid 2px #FFF;
	border-radius: 0.8rem;
}

#about .abt4 {
    font-size: 150%;
    line-height: 1.2em;
    font-feature-settings: "palt" 1;
}
#about .abt4Img {
    width: 90%;
    color:#FFF;
    margin: 1rem auto 1rem auto;
    mix-blend-mode:screen;
}
#about .abt4b {
	font-size: 120%;
    line-height: 1.2em;
    margin: 0 auto 15rem auto;
	padding: 1rem;
}

#about .abtBtn {
    display: block;
    margin: 1rem auto 2rem auto;
    font-size: 120%;
    color: #FFF;
    background-color: #EB1E79;
    font-weight: bold;
    line-height: 1.6em;
    width: 17em;
    padding: 0.6em 1em;
    border: solid 2px #FFF;
    border-radius: 2em;

    -webkit-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.8));
    -moz-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.8));
    -ms-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.8));
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.8));
}
#about .abtBtn::before {
    content: '';
    display: inline-block;
    width: 1.4em;
    height: 1.6em;
    background-image: url("../img/icon_book.png");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}
#about .abt5 {
    font-size: 106%;
    line-height: 1.6em;
    margin: 3rem auto 4rem auto;
    background-color: 
rgba(255,244,255,0.60);
    border-radius: 1rem;
    padding: 2rem 0 2.6rem 0 ;
    width: 88%;
}
#about .abt5 div{
    width: 80%;
    font-size: 90%;
    font-weight: normal;
    margin: 1.6rem auto 0 auto;
    border-top: dotted 1px #231816;
    padding-top: 1.6rem;
}

.balloon {
    position: relative;
    display: inline-block;
    width: 96%;
    border: solid 1px #FFF6DB;
    border-right: none;
    border-left: none;
    box-sizing: border-box;
}

.balloon:after {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  margin-left: -11px;
  border: 8px solid transparent;
  border-bottom: 10px solid #FFF6DB;
  z-index: 1;
}




.koma {
    width: 100%;
	margin-bottom: 0;
}
.komaMlp {
    width: 100%;
    opacity: 0.7;
}


/* ------
   Schedule
------ */
#schedule {
    background-color: #978475;
    background-image: url("../img/bgpt.png");
    background-size: 10%;
    padding: 3rem 2rem 4rem 2rem;
}

#schedule .ttl{
    color: #FFF;
    font-weight: bold;
    font-size: 130%;
}
#schedule .ld{
    color: #FFF6DB;    
}
#schedule img#sched{
    width: 100%;
	max-width: 60rem;
    margin: 2rem auto;
}
#schedule .sub{
    font-size: 70%;
    color: #FFF6DB;
    text-align: center;
}
#schedule .add{
    font-size: 90%;
    font-weight: bold;
    background-color: rgba(255,
246,219,0.3);
    padding: 2rem;
    margin: 2rem auto;
    border: 2px solid #231816;
}


#schedule div#bMag {
    background-color: rgba(255,
246,219,0.3);
    padding: 1.6rem 0;
    margin: 5rem auto 2rem auto;
    border: 2px solid #d2c2b0;
    width:90%; 
	max-width: 72rem;
}
#schedule div#bMag #ttl {
    font-weight: bold;
    line-height: 1.4em;
    margin: 0 auto 1rem auto;
    font-size: 110%;
    color: #231816;
}
#schedule div#bMag #ttl .sub{
    font-size: 80%;
}
#schedule div#bMagImg {
    display:flex;
	justify-content: center;
    margin: 0 auto 1rem auto;
}
#schedule div#bMagImg div#p1 {
    margin: 0 1rem 0 2rem;
}
#schedule div#bMagImg div#p2 {
    margin: 0 2rem 0 1rem;
}
#schedule div#bMagImg img {
    height: 10rem;
    -webkit-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -moz-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -ms-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
}
#schedule div#bMagImg p.tt2 {
    margin-top: 0.4rem;
}
#schedule div#bMagImg p.sub2 {
    font-size: 74%;
    line-height: 1.3em;
    padding: 0 0 1.2rem 0;
    text-align: left;
    color: #231816;
}
#schedule a.btnBmag {
    font-size: 84%;
    display: block; 
    width: 18em; 
    margin: 1rem auto 2rem auto;
    border: solid 1px; 
    padding: 0.6rem 0; 
    background-color: rgba(255,255,255,0.6); 
    border-radius: 0.4rem;
    
    -webkit-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.6));
    -moz-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.6));
    -ms-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.6));
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.6));
}

/* ------
   ReadingParty
------ */
#reading {
    background-color: #D6C7AD;
    background-image: url("../img/bgpt_06.png");
    background-size: 10%;
    padding: 3rem 2rem 4rem 2rem;
}

#reading h3 {
    margin: 0 auto 2rem auto;
    font-feature-settings: "palt" 1;
    
    -webkit-filter:drop-shadow(1px 2px 1px rgba(255, 255, 255, 0.9));
    -moz-filter:drop-shadow(1px 2px 1px rgba(255, 255, 255, 0.9));
    -ms-filter:drop-shadow(1px 2px 1px rgba(255, 255, 255, 0.9));
    filter:drop-shadow(1px 2px 1px rgba(255, 255, 255, 0.9));
}
#reading h3 span.sub {
    display: block;
}
#reading h3 span.sub::before, #reading h3 span.sub::after {
    content: "───────";
    letter-spacing: -0.1em;
    padding: 0 0.4em;
}
#reading h3 span.ttl {
    font-size: 250%;
    font-weight: bold;
    margin: 0 auto;
    line-height: 1.1em;
}
.twUl{
    background:rgba(0, 0, 0, 0) linear-gradient(transparent 76%, #1da1f2 0%) repeat scroll 0 0;
    padding-bottom: 0.5rem;
}

#reading .tx1 {
    margin: -4rem auto 0rem auto;
    font-size: 120%;
    font-weight: bold;
    line-height: 1.4em;
}
#reading .tx2 {
    font-weight: bold;
    font-size: 150%;
    background-color: #FFF;
    border: solid 2px #333;
    width: 14em;
    margin: 0.4rem auto;
}
#reading .tx3 {
    font-size: 120%;
    font-weight: bold;
    margin: 3rem auto 3rem auto;
}
.ccleBG1 {
    border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
    max-width: 46rem;
    margin: -4rem auto -1.2rem auto;
    padding: 3rem 0.3rem 0.4rem 0.3rem;
}
#reading .tx4 {
    font-size: 120%;
    font-weight: bold;
    margin: 4rem auto 0 auto;
    line-height: 1.4em;
    transform: rotate(-4deg);
}
#reading #quo {
    width: 12rem;
    margin: 2rem auto;
    -webkit-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -moz-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -ms-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    transform: rotate(-4deg);
}
#reading .tx5 {
    font-size: 180%;
    font-weight: bold;
    margin: 0 auto 6rem auto;   
    line-height: 1.3em;
    transform: rotate(-4deg);

}
#reading .tx6 {
    
}
#reading div#apply {
    text-align: left;
    margin: 0 auto 0 auto;
	max-width: 60rem;
}
#reading div#apply h4 {
    font-size: 140%;
    font-weight: bold;
    line-height: 1.4em;
    margin-top: -2rem;
}
#reading div#apply h4 span {
    display: block;
    width: 10em;
    margin: 0.5rem auto 1rem auto;
    line-height: 1.2em;
    font-size: 70%;
    color: #FFF6DB;
    background-color: #231816;
    padding: 0.4em;
}
#reading div#apply p {
    margin: 1rem auto 1rem auto;
    width: 90%;
    max-width: 26em;
    font-size: 90%;
}
#reading div#apply p a.twBtn {
    display: block;
    font-weight: bold; 
    text-align: center; 
    border: solid 1px; 
    background-color: #1da1f2;
    padding: 0.8em; 
    color: #FFF;
    margin: 2rem auto 3.2rem auto;
    max-width: 16em;
    border-radius: 0.6rem;
    
    -webkit-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -moz-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -ms-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
}
#reading div#apply p a.twBtn .icon-twitter {
    font-size: 150%;
    line-height: 1em;
}
#reading div.applyBdr{
    margin: 3rem auto 7rem auto;
    border: solid 2px #231816;
    background-color: 
    rgba(255,255,255,0.5);
    line-height: 1.5em;
}
#reading div.applyBdr{
    line-height: 1.5em;
}
#reading div#apply p a.txtLink {
    color: #1da1f2;
    font-weight: bold;
    padding: 0 0.2em;
}



#reading div#al {
	max-width: 60rem;
    margin: 3rem auto 5rem auto;
    border: double 5px #7F7665;
    background-color: 
    rgba(255,255,255,0.3);
    border-radius: 3rem;
    padding: 1rem 2rem 2rem 2rem;
}
#reading div#al img#alImg {
    width: 90%;    
    border: solid 1px #CCC;
}
#reading div#al h4 {
    font-size: 90%;
    margin-bottom: 1rem;
}
#reading div#al p {
    font-size: 90%;
    padding: 1.4rem 1rem;
    border-bottom: dotted 1px #231816;
    line-height: 1.4em;
}
#reading div#al a {
    display: block;
    margin: 1rem 0 0 0;
}
#reading div#al a img {
    width: 20%;
}


#reading ul {
    font-size: 60%;
    text-align: left;
    color: #E8E6E2;
    background-color: rgba(99,88,66,0.43);
    padding: 2rem 2rem;
    margin: 5rem auto 3rem auto;
}
#reading h4 {
    font-weight: bold;
    font-size: 150%;
    text-align: center;
    margin: 0 auto;
}
#reading li {
    list-style: none;
    line-height: 1.4em;
    margin: 0.8rem 0;
}


.bannerM img {
    width: 100%;
	max-width: 50rem;
    margin: 1rem auto;
    
    -webkit-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -moz-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -ms-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
}


/* ------
   Present
------ */
#present {
    background-color: #C5B097;
    background-image: url("../img/bgpt_07.png");
    background-size: 10%;
    padding: 3rem 2rem 4rem 2rem;
}

#present h3 {
    margin: 0 auto 1rem auto;
    text-align: center;
}
#present h3::before, #present h3::after {
    content: "──";
    letter-spacing: -0.1em;
    padding: 0 0.4em;
}

#present .tx1 {
    font-size: 90%;
    font-weight: bold;
    color: #FFF;
    margin: 1rem auto 1rem auto;
    background-color: #39b34a;
    width:90%;
	max-width: 60rem;
}
#present p.tx2 {
    font-weight: bold;
    font-size: 140%;
    line-height: 1.2em;
    margin: 0 auto 1rem auto;
}
#present p.tx3 {
    width: 90%;
    margin: 0 auto 1rem auto;
}
#present p.tx4 {
    width: 90%;
    margin: 1.6rem auto 3.4rem auto;
    border-bottom: dotted 2px #231816;
    padding-bottom: 2rem;
    
}
#present div#presentImg {
    display:flex;
	justify-content: center;
    margin: 0 auto 3rem auto;
}
#present div#presentImg div {
    margin: 0 3rem;
}
#present div#presentImg img {
    height: 19rem;
    -webkit-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -moz-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    -ms-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.4));
}
#present div#presentImg p {
    font-weight: bold;
    font-size: 90%;
    line-height: 1.3em;
    padding: 1.2rem 0;
}
#present div#presentImg #p2 img {
    padding-top: 1rem;
}
#present div#papp p {
    margin: 0 auto 1rem auto;
    font-weight: bold;
    font-size: 90%;
    color: #2A7531;
}
#present div#papp a {
    display: block;
    margin: 0rem auto 3rem auto;
    font-size: 120%;
    color: #FFF;
    background-color: #39B34A;
    font-weight: bold;
    line-height: 1.6em;
    width: 17em;
    padding: 0.6em 1em;
    border: solid 2px #FFF;
    border-radius: 2em;

    -webkit-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.8));
    -moz-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.8));
    -ms-filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.8));
    filter:drop-shadow(1px 5px 5px rgba(0, 0, 0, 0.8)); 
}
#present div#papp a::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.2em;
    background: url("../img/ico_window.svg") no-repeat;
    background-size: 0.8em 0.8em;    
}

/* ------
   Other
------ */
#other {
    color: #FFF6DB;
    background-image: url("../img/bgpt_08.png");
    background-color: #040303;
    background-size: 10%;
    padding: 3rem 2rem;
}

#other dt div {
    width: 18rem; 
    background-color:#FFF;
    margin: 5rem auto 1rem auto;
    padding: 1rem 0.3rem;
}
#other dt div img {
    max-width: 15rem; 
    max-height: 3.2rem;
}


#other a[target="_blank"] p::after {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.2em;
    background: url("../img/ico_window.svg") no-repeat;
    background-size: 0.8em 0.8em;   
}


#other dt {
    font-weight: bold;
    margin-bottom: 0.6rem;
}
#other dd {
    font-weight: normal;
    font-size: 90%;
    color: #A0927F;
    line-height: 1.5em;
}
#other dt#magapoke img{
    
}
#other dt#bonbonTV img{
    
}
#other dt#smapass img{
    
}
#other dt p {
}

#footer {
    padding: 12rem 0;
}
#footer p{
    font-size: 80%;
    color: #5C5756;
}
    

/* ------
   StoreListWindow
------ */
div#storeList {
    text-align: center;
}
div#storeList ul {
    display: flex;
    justify-content:flex-start;
    list-style-type: none;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto 2rem auto;
    padding: 0;
}

div#storeList ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    height: 5em;
    margin: 1%;
    background-color: #fff;
    background: #f7f7f7;
    border: solid 2px #29a9e0;
    border-top: solid 1px #29a9e0;
    border-left: solid 9px #29a9e0;
    border-radius: 0.6rem;
}
div#storeList ul li a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 2em 0.6rem;
    font-weight: bold;
}












.btnS {
	width: 34rem;
	text-align: center;
	margin: 0 auto;
	padding: 0rem 0 2rem 0;
}
.btnS::after {
		display: block;
        content: "";
        clear: both;
}

.btnS p a {
	display: inline-block;
	float: left;
	text-align: center;
	width: 46%;
	padding: .2em;
	border: 1px solid #20110D;
    -moz-border-radius: 3rem;
    -webkit-border-radius: 3rem;
	border-radius: 3em;
	letter-spacing: .1em;
	margin: 0 2%;
}

.btnS p a:hover {
	color: #FFF;
	background-color: #20110D;
}





/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */


.pagetop {
    display: inline-block;
    width: 4em;
    height: 4em;
    margin-bottom: 2em;
    padding: .8em 0;
    border: 1px solid #fff;
    font-size: 12px;
    text-align: center;
    transition: border .6s, background .6s;
    will-change: border-color, background-color;
}

.pagetop:hover {
    border-color: transparent;
    background: rgba(33, 17, 13, .4);
}

.pagetop.fixing {
    z-index: 1;
    position: fixed;
    bottom: 10px;
    left: calc(90% - 24px);
    margin-bottom: 0;
    border: 0;
    background: rgba(33, 17, 13, .6);
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    transition: background .6s, transform .6s;
    will-change: background-color, transform;
}

.pagetop.fixing:hover {
    background: rgba(33, 17, 13, .4);
}

.pagetop.fixing.fix {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}


/* --------------------------------------------------------------------------
 *Loading
-------------------------------------------------------------------------- */
.spinner1 {
  width: 40px;
  height: 40px;
  position: relative;
}


.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}





/* ==========================================================================
   Remoddl's necessary styles
   ========================================================================== */

/* Hide scroll bar */

html.remodal-is-locked {
  overflow: hidden;

  -ms-touch-action: none;
  touch-action: none;
}

/* Anti FOUC */

.remodal,
[data-remodal-id] {
  display: none;
}

/* Necessary styles of the overlay */

.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;

  display: none;
}

/* Necessary styles of the wrapper */

.remodal-wrapper {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;
  overflow: auto;

  text-align: center;

  -webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
  display: inline-block;

  height: 100%;
  margin-left: -0.05em;

  content: "";
}

/* Fix iPad, iPhone glitches */

.remodal-overlay,
.remodal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Necessary styles of the modal dialog */

.remodal {
  position: relative;

  outline: none;

}

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block;
}


/* ==========================================================================
   Remodal's default mobile first theme
   ========================================================================== */

/* Customize */
.remodal-wrapper {
	font-size: 160%;
	line-height: 1.4em;
}
.remodal-wrapper li {
	list-style: none;
	text-indent: 0;
}
.remodal-wrapper p, .remodal-wrapper li {
	text-align: left;
	margin: 2rem 0;
}
.remodal-wrapper h3 {
	font-size: 80%;
	margin-bottom: 1rem;
}
.remodal-wrapper h2 {
	margin-bottom: 3rem;
}
.remodal-wrapper .modalBold {
	font-weight: bold;
}
.remodal-wrapper .modalEm {
	color: #F5673D;
}
.remodal-wrapper .modalSub {
	color: #4A4A4A;
}
.modalCloseLink {
	display: block;
	width: 7em;
	margin: 4rem auto 2rem auto;
	background: #DDD;
	padding: 0.6em 1.2em;
}


/* Default theme styles for the background */

.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

/* Default theme styles of the overlay */

.remodal-overlay {
  background: rgba(43, 46, 56, 0.9);
}

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.remodal-overlay.remodal-is-opening {
  -webkit-animation-name: remodal-overlay-opening-keyframes;
  animation-name: remodal-overlay-opening-keyframes;
}

.remodal-overlay.remodal-is-closing {
  -webkit-animation-name: remodal-overlay-closing-keyframes;
  animation-name: remodal-overlay-closing-keyframes;
}

/* Default theme styles of the wrapper */

.remodal-wrapper {
  padding: 0;
}

/* Default theme styles of the modal dialog */

.remodal {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 35px;

  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  background: #fff;
}

.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.remodal.remodal-is-opening {
  -webkit-animation-name: remodal-opening-keyframes;
  animation-name: remodal-opening-keyframes;
}

.remodal.remodal-is-closing {
  -webkit-animation-name: remodal-closing-keyframes;
  animation-name: remodal-closing-keyframes;
}

/* Vertical align of the modal dialog */

.remodal,
.remodal-wrapper:after {
  vertical-align: middle;
}

/* Close button */

.remodal-close {
  position: absolute;
  top: 0;
  left: 0;

  display: block;
  overflow: visible;

  width: 35px;
  height: 35px;
  margin: 0;
  padding: 0;

  cursor: pointer;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  text-decoration: none;

  color: #95979c;
  border: 0;
  outline: 0;
  background: transparent;
}

.remodal-close:hover,
.remodal-close:focus {
  color: #2b2e38;
}

.remodal-close:before {
  font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
  font-size: 25px;
  line-height: 35px;

  position: absolute;
  top: 0;
  left: 0;

  display: block;

  width: 35px;

  content: "\00d7";
  text-align: center;
}

/* Dialog buttons */

.remodal-confirm,
.remodal-cancel {
  font: inherit;

  display: inline-block;
  overflow: visible;

  min-width: 14em;
  margin: 0;
  padding: 0.8em 0;

  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;

  border: 0;
  outline: 0;
}

.remodal-confirm {
  color: #fff;
  background: #81c784;
	font-weight: bold;
}

.remodal-confirm:hover,
.remodal-confirm:focus {
  background: #66bb6a;
}

.remodal-cancel {
  color: #fff;
  background: #e57373;
}

.remodal-cancel:hover,
.remodal-cancel:focus {
  background: #ef5350;
}

/* Remove inner padding and border in Firefox 4+ for the button tag. */

.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
  padding: 0;

  border: 0;
}

/* Keyframes
   ========================================================================== */

@-webkit-keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);

    opacity: 0;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);

    opacity: 0;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Media queries
   ========================================================================== */

@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 700px;
  }
}

/* IE8
   ========================================================================== */

.lt-ie9 .remodal-overlay {
  background: #2b2e38;
}

.lt-ie9 .remodal {
  width: 700px;
}



@media only screen and (min-width: 768px) {
    #intro {
        min-height: 48rem;
    }
    #ttlin {
        width: 80%;
        position: absolute;
        top:34rem;
        bottom: 0;
        left: 10%;
    }
    
    #logo {
        width: 25.2rem;
        left: 1rem;
    }
    #sttl {
        width: 23rem;
        top: 2.4rem;
        left: 25.8rem;
    }

    #s10th {
        width: 10.4rem;
        top: 0;
        right: 0;
    }
    #about #lead {
        font-size: 160%;
        margin-top: -36rem;
        padding-top: 0rem;
    }
    #about #camp {
        width: 78rem;
    }

    #about #ttlab {
        font-size: 360%;
    }
    
    .ulY {
        font-size: 160%;
        line-height: 1.05em;
    }
    
    .balloon3-right-btm {
            padding-left: 16rem
    }
    .balloon3-right-btm p {
    margin: 1.5em 15px 0 0;
    padding: 1.25rem 0 0 0;
    width: 5rem;
    height: 5rem;
    line-height: 1.2rem;
    font-weight: bold;
    font-size: 70%;
    }
}
@media only screen and (min-width: 1024px) {
}