@charset "utf-8";
@media print, screen and (max-width:768px){
/*=========================================================================
CONTANTES BASIC
=========================================================================*/
body#Top section {padding-top: 0; margin-top: 0;}


#top_infoBox {margin-top: -60px; width: 90%; }

.info_inner {width: 90%; margin: 0 auto; padding: 30px 0 60px;}

@media print, screen and (max-width:320px){
.info_inner {padding: 30px 0 45px;}


}

/*=========================================================================
TOP：HEADER
=========================================================================*/
#top_siteLogo  {
left: 0;
bottom:0;
width: 100%;

height: auto;
padding-bottom: 20%;


-ms-transform: translate(0%, 0%);
-o-transform: translate(0%, 0%);
-moz-transform: translate(0%, 0%);
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
background: #201135; 
}
#top_siteLogo img {margin: 0 auto; width: 60%; margin-top: -14%; max-width: 360px;}

@media screen and (orientation: landscape) {
#top_siteLogo  {
top:80%;
bottom:auto;
transform: translate(0%, -50%);
}
#top_siteLogo img {margin: 0 auto; width: 38%; margin-top: -10%; }

}


/*#top_siteLogo {left:50%;top:79%;width: 58%; z-index: 6; background: transparent; max-width: 360px;}

@media print, screen and (min-width:415px) and ( max-width:736px) {
#top_siteLogo  {
left: 0;
bottom:0;
width: 100%;
max-width: 360px;
height: auto;
max-width: inherit;

-ms-transform: translate(0%, 0%);
-o-transform: translate(0%, 0%);
-moz-transform: translate(0%, 0%);
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
background: #201135; 
}
#top_siteLogo img {margin: 0 auto; width: 58%; margin-top: -15%;}

}

*/
/*=========================================================================
FIRST VIEW
=========================================================================*/
#firstView {background: #201135; height: 100vh; margin-bottom: 0; padding-bottom: 0;}
ul#viewList {background: #201135; height: 100vh;}
ul#viewList li {overflow: hidden; position: relative; z-index: 1; /*padding-bottom: 90%;*/}
ul#viewList li img {position: absolute; left: 0; top: 0; width: 100%; height:auto;}

/*
ul#viewList li span:first-of-type {top: 0%;background-position: center 0%;}
ul#viewList li span:nth-of-type(2) {top: 25%;background-position: center 33.5%;}
ul#viewList li span:nth-of-type(3) {top:50%;background-position: center 66.8%;}
ul#viewList li span:nth-of-type(4) {top: 75%;background-position: center bottom;}
*/

@media screen and (orientation: landscape) {
#firstView {height: auto; margin-bottom: 0%;}
ul#viewList {height: 100%;}
ul#viewList li {padding-bottom:0;}
ul#viewList li img {position: static; height: auto;}
}

/*ul#viewList li, ul#viewList li img {height: 79.7vh;}*/


/*
@media print, screen and (min-width:415px) and ( max-width:736px) {
#firstView {height: auto; margin-bottom: 0px; padding-bottom: 34%; }
ul#viewList {background: #201135;}
ul#viewList li {overflow: hidden; position: relative; z-index: 1; padding-bottom: 120%;}
ul#viewList li img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
}

@media print, screen and (max-width:414px) {
ul#viewList li, ul#viewList li img {height: 76vh;}
}
*/
/*=========================================================================
TOP：ABOUT
=========================================================================*/
#Union #boxHeadline {border-left: 3px solid #e7153f; padding:10px 0 10px 4%; margin-bottom: 15px;}

#about_infoBox { font-size: 13px; }
#about_infoBox p {margin-bottom: 15px;}


@media print, screen and (max-width:320px){
#about_infoBox {font-size: 12px; padding-left: 60px;}

}


/*=========================================================================
TOP：ABOUT：Greeting
=========================================================================*/
dl#greetingBloc, dl#greetingBloc dt, dl#greetingBloc dd {height: auto; color: #fff; position: relative; z-index: 1;}

dl#greetingBloc {padding-bottom: 60px;}

dl#greetingBloc dt {margin-bottom: 60px;}


/*------------------------------------------------------------------------------------------------*/
#aboutUs #boxHeadline.greeting {font-size: 36px; margin-bottom: 30px; padding: 0; border-left: 0;}

#greetingText, #greetingText p {font-size: 13px;}
#greetingText p {margin-bottom: 30px;}

@media print, screen and (max-width:320px){
#aboutUs #boxHeadline.greeting {font-size: 28px; margin-bottom: 20px;}
#greetingText, #greetingText p {font-size: 12px;}

}

/*------------------------------------------------------------------------------------------------*/
#greetingSign {margin-top: 30px;}
#greetingSign p span {font-size: 14px; padding-right:2em;}
#greetingSign p {font-size: 22px;}

@media print, screen and (max-width:320px){
#greetingSign p span {font-size: 11px;}
#greetingSign p {font-size: 18px;}

}

/*------------------------------------------------------------------------------------------------*/
dl#greetingBloc dd #about_infoBox {padding: 0;}

dl#greetingBloc dd #boxHeadline {font-size: 20px; margin-bottom: 30px;}
dl#greetingBloc dd p {font-size: 12px; margin-bottom: 30px;}


@media print, screen and (max-width:320px){
dl#greetingBloc dd #boxHeadline {font-size: 16px;}
dl#greetingBloc dd p {font-size: 11px;}

}

/*=========================================================================
TOP：JOIN
=========================================================================*/
#join_periodTitle {margin-bottom: 25px; padding: 10px 0px; font-size: 15px; width: 45%; max-width: 140px; }


/*------------------------------------------------------------------------------------------------*/
dl#join_priceInfo{margin-bottom:30px;}
dl#join_priceInfo dt, dl#join_priceInfo dd{margin-bottom: 20px;}

dl#join_priceInfo dt {font-size: 12px; width: 15%; margin-right: 1%;}
dl#join_priceInfo dd {width: 84%; font-size: 20px;}

dl#join_priceInfo dd span {font-size: 12px; }
dl#join_priceInfo dd span#price_capLarge {font-size: 15px; padding-left: 10px; line-height: 100%;}

@media print, screen and (max-width:320px){
#join_periodTitle { font-size: 14px;}
dl#join_priceInfo dt, dl#join_priceInfo dd span {font-size: 11px; }
dl#join_priceInfo dt {width: 16%; }
dl#join_priceInfo dd {width: 83%;}

}

/*------------------------------------------------------------------------------------------------*/
#period_captionBox {font-size: 14px; margin-top: 30px;}
#period_captionBox p {margin-bottom: 5px;}

@media print, screen and (max-width:320px){
#period_captionBox {font-size: 11px; }
}


/*=========================================================================
TOP：TRIAL
=========================================================================*/
#boxHeadline.trial {margin-bottom: 30px;}

#Trial #sectionVisual img {background-position: 88% top;}
#Trial #onePeriod {margin-bottom: 60px;}


/*------------------------------------------------------------------------------------------------*/
#trialTitle {font-size: 22px;margin-bottom: 15px;}
#trialTitle span {font-size: 16px; display: block; margin-top: 5px;}

@media print, screen and (max-width:375px){
#trialTitle {font-size: 20px;}
#trialTitle span {font-size: 14px;}
}


@media print, screen and (max-width:320px){
#trialTitle {font-size: 18px;}
#trialTitle span {font-size: 13px;}
}


/*------------------------------------------------------------------------------------------------*/
#Trial #join_periodTitle {margin-bottom: 20px; }

/*------------------------------------------------------------------------------------------------*/
#join_subHeadline {font-size: 14px; margin-bottom: 15px;}

/*------------------------------------------------------------------------------------------------*/
#Trial dl#join_priceInfo{margin-bottom:45px;}

@media print, screen and (max-width:320px){
/*------------------------------------------------------------------------------------------------*/
#join_subHeadline {font-size: 13px;}

}

/*=========================================================================
NEWS
=========================================================================*/
#top_infoBody .section_inner {width: 90%; }

/*---------------------------------------------------------------------------------------------------------------------------------------------------- */
ul#articleList {margin-bottom: 45px;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------- */
ul#articleList li #New {font-size: 11px;}


}