@charset "utf-8";
/* CSS Document */
/******************************************************************************
 Default CSS Reset
******************************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure{
    margin: 0;
    padding: 0;
    background-color: rgba(162,132,85,1.00);
}
table{
 border-collapse:collapse;
 border:1px solid #FFF;
}
table tr{
 border-bottom: 1px solid #FFF;
}
table th,table td{
 padding: 0.5em;
 border-left: 1px solid #FFF;
}
fieldset,img{
 border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
 font-style:normal;
 font-weight:normal;
}
ol,ul{
 list-style:none;
}
caption{
 text-align:left;
}
h1,h2,h3,h4,h5,h6{
 font-size:100%;
 font-weight:normal;
}
img {
 vertical-align: bottom;
 /* chormeで画像のぼやけ回避 */
 -webkit-backface-visibility: hidden; 
}

::-webkit-scrollbar{
　　width: 10px;
}
::-webkit-scrollbar-track{
　　background: #fff;
　　border-left: solid 1px #ececec;
}
::-webkit-scrollbar-thumb{
　　background: #ccc;
　　border-radius: 10px;
　　box-shadow: inset 0 0 0 2px #fff;
}

/******************************************************************************
 General Setting
******************************************************************************/
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #FFFFFF;
    word-wrap : break-word;
    -webkit-font-smoothing: antialiased;
    position: relative;
    line-height: 1.3;
    font-size: 12px;
}
a {
 color: #FFF;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 text-decoration: none;
 outline:none;
}
a:focus, *:focus { outline:none; }
/*** align ***/
.ar { text-align:right;}
.al { text-align:left;}
.ac { text-align:center;}
/*** clearfix ***/
.cf:after{
 content: "."; 
 display: block; 
 height: 0; 
 font-size:0; 
 clear: both; 
 visibility:hidden;
}

/*** font ***/
.jp {
 font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", sans-serif;
 font-weight: 400;
}
.play{
 font-family: 'Play', sans-serif;
 line-height:1.5em;
 font-weight:bold;
}
.robot{
 font-family: 'Roboto', sans-serif;
}
.robocon{
 font-family: 'Roboto Condensed', sans-serif;
 font-weight: 600;
}
.kan {
 font-family: 'DF-KanTeiRyu-W9', sans-serif;
}

/*** text color ***/
.red { color:#C00; font-weight:bold;}
.blue { color: #55aada;}
.orange {
color: #ff6e02;  
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fffc00+30,ff6e02+77 */
background: -webkit-linear-gradient(-45deg, #fffc00 30%,#ff6e02 77%); /* Chrome10-25,Safari5.1-6 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffc00', endColorstr='#ff6e02',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/* text gradient */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.sha {
 background: url(../images/common/bg_sha.png) repeat center center rgba(0,0,0,0.4);
}

/******************************************************************************
 Common
******************************************************************************/
/* headline ****************************************************/
h2.tit {
 padding: 1em 1em;
 margin: 0 auto 3em;
 border: 1px solid #FFF;
 background: #000;
 color: #FFF;
 font-weight: 600;
 position: relative;
 box-sizing: border-box;
 font-size: 115%;
 
}
h2.tit:after {
 content: "";
 display: block;
 width: 16px;
 height: 13px;
 background: url(../images/common/img_tit.png);
 background-size: 100% 100%;
 position: absolute;
 left: -1px;
 bottom: -13px;
}
@media screen and (min-width: 768px) {
 h2.tit { 
  width: 80%;
  border-width: 2px;
 }
 h2.tit:after { width: 20px; height: 16px; left: -2px; bottom: -16px;}
}
h3.mi {
 padding: 0.3em 1.5em;
 margin-bottom: 1em;
 border: 1px solid #FFF;
 background: #000;
 color: #FFF;
 font-weight: 600;
 position: relative;
 box-sizing: border-box;
 letter-spacing: 0.5em;
 font-size: 85%;
}
h3.mi:after {
 content: "";
 display: block;
 width: 5px;
 height: 4px;
 background: url(../images/common/img_mi.png);
 background-size: 100% 100%;
 position: absolute;
 left: -1px;
 bottom: -4px;
}
@media screen and (min-width: 768px) {
 h3.mi { border-width: 2px;}
 h3.mi:after { width: 10px; height: 8px; left: -2px; bottom: -8px;}
}
h3.submi {
 text-align: center;
 font-size: 115%;
 font-weight: bold;
 margin-bottom: 2em;
}
h3.border {
 padding: 0.5em;
 font-size: 125%;
 font-weight: bold;
 border-bottom: 1px solid #FFF;
 margin-bottom: 1em;
}
/* parts ****************************************************/
.icon {
 display: inline-block;
 width: 17.5px;
 height: auto;
}
.icon img {
 vertical-align:middle;
}
.bg_black {
 background: rgba(0,0,0,0.5);
}
.linkBtn,
.btnStyle{
 margin-bottom: 1.5em;
}
.linkBtn a,
.btnStyle button{
 display: block;
 width: 100%;
 padding: 0.5em 0;
 color: #000;
 text-align: center;
 line-height: 1.7em;
 box-sizing: border-box;
 border-radius: 4px;
 font-size: 100%;
 font-weight: bold;
 background: #FFF;
 border:none;
}
.linkBtn.large a,
.btnStyle.large button{
 font-size: 115%;
 line-height: 1.7em;
 padding: 0.8em 0;
}
.linkTxt a{
 font-weight: 500;
 font-size: 85%;
}
.disabled a,
.disabled button{
 color: #FFF;
 background: #7c7c7c;
 cursor:not-allowed;
}
.grdY a,
.grdY button{
 color: #000;
 background: #fffc00; /* Old browsers */
 background: -moz-linear-gradient(-45deg, #fffc00 30%, #ff6e02 77%); /* FF3.6-15 */
 background: -webkit-linear-gradient(-45deg, #fffc00 30%,#ff6e02 77%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(135deg, #fffc00 30%,#ff6e02 77%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffc00', endColorstr='#ff6e02',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.grdAqua a,
.grdAqua button{
 color: #FFF;
 background: #75f8fa; /* Old browsers */
 background: -moz-linear-gradient(-45deg, #75f8fa 30%, #c8abd6 77%); /* FF3.6-15 */
 background: -webkit-linear-gradient(-45deg, #75f8fa 30%,#c8abd6 77%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(135deg, #75f8fa 30%,#c8abd6 77%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75f8fa', endColorstr='#c8abd6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
@media screen and (min-width: 768px) {
 .linkBtn.large,
 .btnStyle.large{
  width: 80%;
  margin: 0 auto 1.5em;
 }
}


/* form ****************************************************/
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
}
input[type="submit"]:-webkit-search-decoration,
input[type="button"]:-webkit-search-decoration {
  display: none;
}
input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select{
	padding:7px 2%;
	border:#000 1px solid;
	border-radius:2px;
 color: #000;
 width: 100%;
 box-sizing: border-box;
 margin-bottom: 5px;
}
input[type="checkbox"] {
 vertical-align: middle;
}
label { 
 display:inline-block; 
 vertical-align:middle;
}
input.short { width: 25%;}
input.midd { width: 48%;}

/* modal ****************************************************/
#modalMask{
 z-index:10;
 position:fixed;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 /*background:rgba(0,0,0,0.86);*/
 display: none;
 animation: fadeOut 0.3s ease-in-out 1 alternate;
}
#modalMask.active {
 display: block;
 animation: fadeIn 0.3s ease-in-out 1 alternate;
}
.modalWrap {
 width: 100%;
 padding: 0;
 z-index:30;
 position:fixed;
 text-align: center;
 bottom:0;
 
 display: none;
 box-sizing: border-box;
}
.modalWrap.active {
 display: block;
 animation: fadeIn 0.3s ease-in-out 1 alternate;
}
.modalWrap .modalContent{
 width: 94%;
 max-width: 980px;
 padding: 3em 3%;
 margin: 0 auto;
 box-sizing: border-box;
 text-align: center;
 background:rgba(0,0,0,0.86);
 border: 1px solid #FFF;
}
@media screen and (min-width: 768px) {
 .modalWrap {
  background:rgba(0,0,0,0.86);
 }
 .modalWrap .modalContent {
  border: none;
  background: none;
 }
}

.modalWrap h2 {
 font-size: 130%;
 line-height: 1.5em;
 font-weight: 900;
 margin-bottom: 1em;
}
.modalWrap h3 {
 font-size: 115%;
 margin-bottom: 2em;
}
.modalWrap .btnWrap{
 display: -webkit-flex;
 display: flex;
 flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
 justify-content: center;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
 align-items:center; 
 -webkit-box-align:center;
 -webkit-align-items:center;
}
.modalWrap .btnWrap li{
 width: 48%;
 margin: 0 1%;
 max-width: 250px;
}
.modalWrap .btnWrap li .arrow {
 display: inline-block;
 width: 20px;
 vertical-align: middle;
 margin-right: 0.5em;
}
.modalWrap .btnWrap li .arrow img {
 vertical-align: top;
}
.modalWrap .btnWrap li button,
.modalWrap .btnWrap li a{
 width: 100%;
 display: block;
 padding: 1em 0;
 text-align: center;
 border: none;
 border-radius: 3px;
 font-size: 130%;
 line-height: 1.3em;
 font-weight: 900;
}

/* listMark ****************************************************/
ul.listMark {
 list-style:none;
 padding-left:1em;
 text-indent:-1em;
}
ul.listMark.disc {
 list-style: disc inside;
}
ul.listMark.deci {
 list-style: decimal inside;
}
ul.listMark.deci-zero {
 list-style: decimal-leading-zero inside;
}

/* swiper ****************************************************/
.swiper-container {
 padding: 0 0 30px;
}
.swiper-button-next, .swiper-button-prev {
 position: absolute;
 top: 50%;
 width: 40px;
 height: 40px;
 margin-top: -45px;
 background-size: 100% 100%;
}
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-next {
 background-image: url("../images/common/prev.png");
 left: -10px;
 right: auto;
}
.swiper-button-next, 
.swiper-container-rtl .swiper-button-prev {
 background-image: url("../images/common/next.png");
 right: -10px;
 left: auto;
}
.swiper-container-horizontal > .swiper-pagination-bullets, 
.swiper-pagination-custom, 
.swiper-pagination-fraction {
 bottom: 0px;
 left: 0;
 width: 100%;
}
.swiper-pagination-bullet {
 width: 10px;
 height: 10px;
 background: none;
 opacity: 1;
 border: 1px solid #FFF;
 box-sizing: border-box;
 border-radius: 0;
}
.swiper-pagination-bullet-active {
 opacity: 1;
 background: #FFF;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
 margin: 0 8px;
}
@media screen and (min-width: 768px) {
/* .swiper-button-next, .swiper-button-prev {
   width: 80px;
   height: 80px;
   margin-top: -65px;
 }*/
 .swiper-button-prev, 
 .swiper-container-rtl .swiper-button-next {
  left: 16%;
 }
 .swiper-button-next, 
 .swiper-container-rtl .swiper-button-prev {
  right: 16%;
 }
}
/* flexbox ****************************************************/
.flexWrap{
 display: -webkit-flex;
 display: flex;
 
 flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
 
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;

 align-items:center; 
 -webkit-box-align:center;
 -webkit-align-items:center;
}
.flexNowrap{
 display: flex;
 display: -webkit-flex;
 
 flex-wrap:nowrap;
  -webkit-flex-wrap:nowrap;
  
 justify-content:space-between;
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  
 align-items:center;
  -webkit-box-align:center;
  -webkit-align-items:center; 
}

.js-center {
 justify-content: center;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
}
.js-start {
 justify-content: flex-start;
 -webkit-box-pack:start;
 -webkit-justify-content:flex-start;
}
.al-stretch {
 align-items:stretch;
 -webkit-box-align:stretch;
 -webkit-align-items:stretch;
}
.al-start {
 align-items:flex-start;
 -webkit-box-align:flex-start;
 -webkit-align-items:flex-start;
}
.flex-reverse{
 flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse; 
  -webkit-box-direction:reverse;
}
.flex-column {
 flex-direction: column;
  -webkit-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
@media screen and (max-width: 767px) {
 .flex-pc {
  display: block;
 }
}

/******************************************************************************
 keyframes
******************************************************************************/
/* animation ****************************************************/
.mvMove,
.scrMove,
.fvMove,
.touchMove .go{
 -webkit-transition: 0.4s ease-out;
 transition: 0.4s ease-out;
 opacity: 0;
}

.mvMove.on,
.scrMove.on,
.fvMove.on,
.selected .touchMove.go{
 opacity:1;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.4s;
 animation-duration:0.4s;
 visibility: visible !important;
}

/******************************************************************************
 animation
******************************************************************************/
.fromTop { 
 position: relative;
 top: -100px;
}
.fromTop.on { 
 position: relative;
 top:0;
}
.fromBottom { 
 position: relative;
 top: 100px;
}
.fromBottom.on { 
 position: relative;
 top:0;
}


@keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes fadeOut {
 0% { opacity: 1;}
 100% { opacity: 0;}
}
.fromLeft.on{
 -webkit-animation-name: fromLeft;
 animation-name: fromLeft;
}
@-webkit-keyframes fromLeft {
 0% { transform: translateX(-100%); }
 100% { transform: translateX(0); }
}
@keyframes fromLeft {
 0% {  transform: translateX(-50%); }
 100% { transform: translateX(0);}
}

.fromRight.on{
 -webkit-animation-name: fromRight;
 animation-name: fromRight;
}
@-webkit-keyframes fromRight {
 0% { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(0); }
}
@keyframes fromRight {
 0% {  transform: translateX(100%); }
 100% { transform: translateX(0);}
}

.stretchWd.on{
 -webkit-animation-name: stretchWd;
 animation-name: stretchWd;
}
@-webkit-keyframes stretchWd {
 0% { -webkit-transform: scale(0.1, 1); transform-origin: right;}
 100% { -webkit-transform: scale(1, 1); transform-origin: right;}
}
@keyframes stretchWd {
 0% { transform: scale(0.1, 1); transform-origin: right;}
 100% { transform: scale(1, 1); transform-origin: right;}
}

.bounce.on,
.selected .bounce{
 -webkit-animation-name: bounce;
 animation-name: bounce;
 
}
@-webkit-keyframes bounce {
 0% { -webkit-transform: scale(3, 3); }
 50% { -webkit-transform: scale(0.5, 0.5); }
 100% { -webkit-transform: scale(1, 1); }
}
@keyframes bounce {
 0% { transform: scale(3, 3);}
 50% { transform: scale(0.5, 0.5); }
 100% { transform: scale(1, 1);}
}

.delay {
 opacity: 0;
 animation-delay: 0.3s;
 transition-delay: 0.3s;
}