@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

img{ vertical-align: bottom;}
ul{ list-style: none;}
ul li{ list-style-type: none;}
figure { margin: 0;}


/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0;}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend { border: 0;}
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline;}
button,
input { line-height: normal;}
button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0;}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top;}
input[type="search"]:focus { outline: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*	Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
  	  touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; top: 0; left: 0; display: block;}
.slick-track:before,
.slick-track:after { display: table; content: '';}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide { float: right;}
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img { pointer-events: none;}
.slick-initialized .slick-slide { display: block;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto;}
.slick-arrow.slick-hidden { display: none;}

.slick-arrow{ width: 40px; height: 40px; position: absolute; top: 50%; transform: translateY(-85%);
 background: none; border: none; z-index: 100;
 text-indent: -9999em; outline: none; margin-top: -20px;
}
.slick-prev { left: -40px;}
.slick-next { right: -40px;}
.slick-arrow:before{ position: absolute; content: ''; display: block; width: 20px; height: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);}
.slick-prev:before { left: 30%; border-bottom: solid 2px #000; border-left: solid 2px #000;}
.slick-next:before { right: 30%; border-top: solid 2px #000; border-right: solid 2px #000;}

.slick-dots { padding: 20px 0;}
.slick-dots { font-size: 0; text-align: center;}
.slick-dots li { display: inline-block; margin: 0 5px;}
.slick-dots li button{ text-indent: -999em; border: none; width: 12px; height: 12px; background: #d1d1d1; border-radius: 50%; outline: none;}
.slick-dots li.slick-active button{ background: #d8282d;}

.slide img { width: 100%;}
@media (max-width: 641px) {
	.slick-prev { left: -30px;}
	.slick-next { right: -30px;}
}

@media (max-width: 481px) {
	.slick-arrow{ margin-top: 0px;}
	.slick-dots { padding: 10px 0;}
	.slick-dots li { margin: 0 4px;}
	.slick-dots li button{ width: 8px; height: 8px;}
}


/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.8; filter: alpha(opacity = 80);}
#colorbox{outline:0;}
#cboxContent{margin-top:32px; overflow:visible; background:#000;}
  .cboxIframe{background:#fff;}
  #cboxError{padding:50px; border:1px solid #ccc;}
  #cboxLoadedContent{background:#000; padding:1px;}
  #cboxLoadingOverlay{background:#000;}
  #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
  #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

  /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
  #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:30px; height:30px; position:absolute; top:-35px;}
  
  /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
  #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

  #cboxPrevious{ right:54px;}
  #cboxPrevious:hover{ }
  #cboxNext{ right:32px;}
  #cboxNext:hover{}
  #cboxClose{ background: none; right:0;}
	#cboxClose:before,
	#cboxClose:after { content: ''; display: block; width: 1px; height: 30px; background: #fff;
	 position: absolute; top: 50%; left: 50%;
	}
	#cboxClose:before{ transform: translate(0,-50%) rotate(45deg);}
	#cboxClose:after { transform: translate(0,-50%) rotate(-45deg);}
  #cboxClose:hover{}
  .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
  .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
  .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
  .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
  .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}


/*		font-style
-------------------------------------------------- */
@font-face{
	font-family:'GothamNarrow-Light'; font-weight: 100; src: url("../font/GothamNarrow-Lignt.otf") format('opentype');
;
}
@font-face{
	font-family:'GothamNarrow-M'; font-weight: 400; src: url("../font/GothamNarrow-Medium.otf") format('opentype');
}
@font-face{
	font-family:'GothamNarrow-Bold'; font-weight: 700; src: url("../font/GothamNarrow-Bold.otf") format('opentype');
}
@font-face{
	font-family:'GothamNarrow-Black'; font-weight: 900; src: url("../font/GothamNarrow-Black.otf") format('opentype');
}

body { width: 100%;
	font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','ＭＳ Ｐゴシック',sans-serif;
/*	font-family: "游ゴシック","Yu Gothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", "メイリオ","Meiryo",sans-serif;*/
	font-size: 18px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.fixed { position: fixed;}

input, textarea {font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','ＭＳ Ｐゴシック',sans-serif;}
.eng { font-family: 'GothamNarrow-Bold', sans-serif;}
.min { font-family: '游明朝', 'Yu Mincho', 'YuMincho', serif;}
p { font-weight: 700;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}

.loading { position: fixed; top: 0; left: 0;
 display: flex; align-items:center; justify-content: center; width: 100%; height: 100vh;
 text-align:center; background:rgba(0,0,0,1); z-index:10000;
}
.loading .animated { animation: 3.0s ease-out zoomIn forwards;}

@keyframes fadeIn {
  0% { opacity: 0;}
 100%{ opacity: 1;}
}
@keyframes showIn{
	0% {
    -webkit-transform: scale(1);
    transform: scale(1);
	}
	14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
	}
	28% {
    -webkit-transform: scale(1);
    transform: scale(1);
	}
	42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
	}
	70% {
    -webkit-transform: scale(1);
    transform: scale(1);
	}
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% { opacity: 1;}
  100%{ opacity: 1;}
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}


@media (max-width: 641px) {
}


#contact ul li label.error {
	position: absolute; top: -30px; left: -10px;
	padding: 5px 8px;
	background: #d00; border-radius: 5px;
	color: #fff; font-size: 12px;
	opacity: 0;
	animation: .5s showError linear forwards .2s;
}
#contact ul li label.error:before{ content: ''; display: block; width: 8px; height: 8px; background: #d00;
	transform: rotate(45deg);
	position: absolute; bottom: -4px; left: 20px;
}
@keyframes showError{
	100%{ opacity: 1;}
}




/*		Header
-------------------------------------------------- */
#hd { position: fixed; left: 0; top: 0; width: 100%; z-index: 1001; transition: 0.2s linear; background: rgba(255,255,255,0);}
#hd .inner-hd { position: relative; width: 94%; margin: 0 auto; padding: 15px 0;}
#hd h1 { width: 50%;}
#hd h1 img { display: inline-block; max-width: 130px; margin-right: 20px; vertical-align: middle;}
#hd h1 span{ display: inline-block; color: #fff; line-height: 1.4; vertical-align: middle;}
#hd h1 span em { display: block; letter-spacing: 0.025rem;}
#hd .menu { position: absolute; right: 0; top: 50%; width: 35px; height: 35px; padding: 0 4px;
 transform: translate(0,-50%);}
#hd .menu div { position: relative; width: 100%; height: 100%;}
#hd .menu div span { position: absolute; left: 0; display: block; height: 3px; background: #fff;
 transition: 0.3s linear;
}
#hd .menu div span:nth-of-type(1) { width: 100%; top: 6px;}
#hd .menu div span:nth-of-type(2) { width: 70%; top: 17px;}
#hd .menu div span:nth-of-type(3) { width: 100%; top: 28px;}
#hd .menu.active div span:nth-of-type(1) { transform: translate(0,11px) rotate(45deg);}
#hd .menu.active div span:nth-of-type(2) { transform: translate(-20px,0); opacity: 0;}
#hd .menu.active div span:nth-of-type(3) { transform: translate(0,-11px) rotate(-45deg);}
@media (max-width: 801px) {
	#hd h1 { width: 80%;}
	#hd h1 span { font-size: 16px;}
}
@media (max-width: 481px) {
	#hd h1 img { width: 100px; margin-right: 10px;}
	#hd h1 span { font-size: 12px;}
}

#hd h1 img.bk { display: none;}
#hd h1 span{ color: #fff;}
#hd.bk { background: rgba(255,255,255,0.6);}
#hd.bk h1 img.wh { display: none;}
#hd.bk h1 img.bk { display: inline-block;}
#hd.bk h1 span{ color: #000;}
#hd.bk .menu div span{ background: #000;}
#hd.open h1 span{ display: none;}


/*		Footer
-------------------------------------------------- */
#ft { background: #000; padding: 20px 0;}
#ft .inner-ft { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 1000px; margin: 0 auto 8px;}
#ft h3 { width: 40%; max-width: 130px; color: #fff;}
#ft h3 img{ width: 100%;}
#ft ul { width: 60%; font-size: 0; text-align: right;}
#ft ul li { display: inline-block; width: 45%; max-width: 140px; padding-left: 20px; font-size: 14px;}
#ft ul li:first-child { padding-left: 0;}
#ft ul li a { color: #fff; text-decoration: none;}
#ft p { width: 90%; max-width: 1000px; margin: 0 auto; color: #c9c9c9; font-size: 11px;}
@media (max-width: 481px) {
	#ft h3 { width: 25%;}
	#ft ul { width: 75%;}
	#ft ul li { padding-left: 8px; font-size: 12px;}
}

.fix-btn { position: fixed; right: 5%; bottom: 60px; width: 180px; z-index: 11;}
.fix-btn a { display: block;}
.fix-btn a img{ width: 100%;}
.fix-btn a:hover { opacity: 0.8;}
@media (max-width: 481px) {
	.fix-btn { bottom: 40px; width: 80px;}
}


#grobal-menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow-y: scroll; background: #1e1e1e url(../img/bg-ptn-2.png); z-index: 100;}
#grobal-menu.open { display: block;}
#grobal-menu .inner-menu { padding: 100px 50px 50px;}
#grobal-menu ul li a{ color: #fff; text-decoration: none; }
#grobal-menu .bloc-1:after,
#grobal-menu .bloc-2:after { content: ''; display: block; width: 25%; max-width: 200px; height: 1px; background: #c9c9c9; margin: 0 auto 40px;}
#grobal-menu .bloc-1 ul,
#grobal-menu .bloc-2 ul,
#grobal-menu .bloc-3 ul { font-size: 0; text-align: center;}
#grobal-menu .bloc-1 ul li { margin-bottom: 40px; font-size: 32px; font-weight: 700; font-style: italic;}
#grobal-menu .bloc-2 ul li a { color: #fff;}
#grobal-menu .bloc-2 ul li { margin-bottom: 40px; font-size: 27px; font-weight: 700; font-style: italic;}
#grobal-menu .bloc-2 ul li a { color: #c9c9c9; }
#grobal-menu .bloc-3 ul li { display: inline-block; margin: 0 20px; font-size: 24px; font-weight: 700;}
#grobal-menu .bloc-3 ul li a { color: #c9c9c9;}
@media (max-width: 1001px) {
	#grobal-menu .bloc-1 ul li { font-size: 28px;}
	#grobal-menu .bloc-2 ul li { font-size: 24px;}
	#grobal-menu .bloc-3 ul li { font-size: 18px;}
}
@media (max-width: 801px) {
	#grobal-menu .bloc-1 ul li { font-size: 28px;}
	#grobal-menu .bloc-1 ul li a span{ display: block; text-indent: -12px;}
	#grobal-menu .bloc-2 ul li { font-size: 24px;}
	#grobal-menu .bloc-3 ul li { font-size: 18px;}
}
@media (max-width: 641px) {
	#grobal-menu .inner-menu { padding: 100px 30px 30px;}
	#grobal-menu .bloc-1:after,
	#grobal-menu .bloc-2:after { margin: 0 auto 30px;}
	#grobal-menu .bloc-1 ul li { margin-bottom: 30px; font-size: 28px;}
	#grobal-menu .bloc-2 ul li { margin-bottom: 30px; font-size: 24px;}
	#grobal-menu .bloc-3 ul li { font-size: 18px;}
}
@media (max-width: 481px) {
	#grobal-menu .inner-menu { padding: 80px 15px 20px;}
	#grobal-menu .bloc-1:after,
	#grobal-menu .bloc-2:after { margin: 0 auto 20px;}
	#grobal-menu .bloc-1 ul li { margin-bottom: 20px; font-size: 18px;}
	#grobal-menu .bloc-2 ul li { margin-bottom: 20px; font-size: 16px;}
	#grobal-menu .bloc-3 ul li { font-size: 14px;}
}



/*		contents
-------------------------------------------------- */
.sct{ position: relative;}
.inner-sct { position: relative; width: 90%; max-width: 1000px; margin: 0 auto; padding: 40px 0; z-index: 2;}
.ttl{ opacity: 0;}
.ttl.show { animation: .3s ease-out fadeIn forwards;}
.ttl h1 { text-align: center;}
.ttl h1 img{ width: 100%; margin: 0 auto;}
.ttl h1 img.sp { display: none;}
.tit { font-size: 60px; text-align: center;}
.topic { position: relative; z-index: 2; margin: 0 auto 30px; padding-bottom: 24px; text-align: center;
 transition: 0.3s ease-out; transform: translate(0,-20px); opacity: 0;
}
.topic:after { content: ''; display: block; width: 50px; height: 28px;
 background: url(../img/fukidashi.png) no-repeat 50% 0 / cover;
 position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); z-index: 2;
}
.topic h2 { font-size: 30px;}
.topic h2 span { position: relative; display: inline-block; padding: 12px 20px; background: #fff; border: solid 4px #000; z-index: 1;}
.topic h2 span em{ display: inline-block; margin-right: 6px;}
.topic h2 br.sp { display: none;}
.topic.show { transform: translate(0,0); opacity: 1;} 
@media (max-width: 801px) {
	.ttl h1 img.pc { display: none;}
	.ttl h1 img.sp { display: block;}
}
@media (max-width: 641px) {
	.topic h2 { font-size: 24px;}
}
@media (max-width: 481px) {
	.inner-sct { padding: 20px 0;}
	.topic { margin: 0 auto 15px; padding-bottom: 18px;}
	.topic:after { width: 38px; height: 21px;}
	.topic h2 { font-size: 16px;}
	.topic h2 span { padding: 4px 10px; border: solid 3px;}
	.topic h2 br.sp { display: block;}
}


p.mb { margin-bottom: 40px;}
p.read { font-size: 24px; line-height: 2;}
p.text { font-size: 22px; line-height: 2;}
p.text em { margin: 0 -5px;}
p.note { font-size: 20px;}
p span.br { display: block;}
p.marker img{ width: 100%; max-width: 440px;}
@media (max-width: 641px) {
	p.read { font-size: 22px;}
	p.text { font-size: 20px;}
	p.note { font-size: 16px;}
	p span { display: block;}
}
@media (max-width: 481px) {
	p.mb { margin-bottom: 20px;}
	p.read { font-size: 15px; line-height: 1.75;}
	p.text { font-size: 13px; line-height: 1.75;}
	p.note { font-size: 12px;}
}


@media (max-width: 641px) {
	.tit { font-size: 40px;}
}
@media (max-width: 481px) {
	.tit { font-size: 28px;}
}

#pos1, #pos2, #pos3, #pos4, 
#pos5, #pos6, #pos7, #pos8 { position: absolute;}
#pos1 { top: 0px;}
#pos2 { top: -90px;}
#pos3 { top: 100px;}
#pos4 { top: -90px;}
#pos5 { top: 50px;}
#pos6 { top: -90px;}
#pos7 { top: 110px;}
#pos8 { top: 0px;}
@media (max-width: 481px) {
	#pos2 { top: -70px;}
	#pos3 { top: -30px;}
	#pos4 { top: -60px;}
	#pos5 { top: -10px;}
	#pos6 { top: -60px;}
	#pos7 { top: 30px;}
	#pos8 { top: -10px;}
}

#index-kv { position: relative; display: flex; align-items: center; justify-content: center;
 width: 100%; height: 100vh; max-height: 1082px;
 background: #000; overflow: hidden;
}
#index-kv .hero_visual { z-index: 1; position: absolute; top: 0; left: 0;
 width: 100%; height: 100%;
}
#index-kv .hero_visual .video_overlay{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;
 background: rgba(0,0,0,.2) url(../img/bg_dot.png) left top repeat; z-index: 2;
}
#index-kv .hero_visual video { width: auto; min-width: 100%; height: 100%; min-height: 100%;
 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1;
}
#index-kv .hero_visual video.sp { display: none;}

#index-kv .hero_txt { position:relative; width:100%; height:100%; opacity:0; z-index: 10;}
#index-kv .hero_txt svg { max-width: 2975px; width:175%;
 position:absolute; top:50%; left:50%; transform:translate(-50%,-55%);
}
.animate { visibility: hidden;}
.animated { animation-duration: .4s; animation-timing-function: ease-out;}
.animated.fadeIn { animation-duration: 1s;}
#svg-animation path{ fill: none; stroke: #fff;
 stroke-width: 20; stroke-linecap: round; stroke-linejoin: round;
 stroke-miterlimit: 10; stroke-dasharray: 1500; stroke-dashoffset:1500;
}
#index-kv .heroTxt { animation: 0.5s heroTxt ease-out 2s alternate;
  /* animation-iteration-count: infinite; */
}
#index-kv .hero_scroll { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); z-index: 10;
 text-align: center;
}
@-webkit-keyframes heroTxt {
  from {
    transform:perspective(1000px) translate3d(0px, 0px, 0px);
    transform:scale(1.2, 1.2);
  }
  to {
    transform:translate3d(0);
    transform:scale(0.6, 0.6);
  }
}
@keyframes heroTxt {
  from {
    transform:perspective(1000px) translate3d(0px, 0px, 0px);
    transform:scale(1.2, 1.2);
  }
  to {
    transform:translate3d(0);
    transform:scale(0.6, 0.6);
  }
}

#index-kv .heroTxtSp {
  animation-name: heroTxtSp;
	animation-timing-function: ease-out;
  /* animation-iteration-count: infinite; */
  animation-direction: alternate;
	animation-duration: 0.5s;
}
@-webkit-keyframes heroTxtSp {
  from {
    transform:perspective(1000px) translate3d(30px, 30px, 30px);
    transform:scale(1.8, 1.8);
  }
  to {
    transform:translate3d(0);
    transform:scale(0.8, 0.8);
  }
}
@keyframes heroTxtSp {
  from {
    transform:perspective(1000px) translate3d(30px, 30px, 30px);
    transform:scale(1.8, 1.8);
  }
  to {
    transform:translate3d(0);
    transform:scale(0.8, 0.8);
  }
}


.hero_scroll a { display: block; color: #fff; font-size: 14px; text-decoration: none;}
.hero_scroll a img { display: block; width: 50px; margin: 0 auto 10px;}
.animation_scroll { animation: scrollArr 1.5s infinite;}
@keyframes scrollArr {
	0% { transform: translate(0, -30px); opacity: 0;}
	50% { opacity: 1;}
	100% { transform: translate(0, 0); opacity: 0;}
}



@media (max-width: 641px) {
	#index-kv { width: 100%; height: auto;}
	#index-kv .hero_visual { position: relative; top: 0; left: 0; width: 100%; height: auto;}
	#index-kv .hero_visual video { position: relative; top: 0%; left: 0%; transform: translate(0%,0%);}
	#index-kv .hero_visual video.pc { display: none;}
	#index-kv .hero_visual video.sp { display: block; width: 100%; height: auto;}
}

.txt-parts .inner-sct { max-width: 660px; }
.txt-parts h3{ margin-bottom: 30px; font-size: 30px;}

.txt-flex { position: relative; display: flex; justify-content: space-between;
 width: 90%; max-width: 700px; margin: 0 auto; z-index: 2;
 transition: 0.3s ease-out; opacity: 0;
}
.txt-flex.rev { flex-direction: row-reverse;}
.txt-flex#no1 { align-items: flex-end; margin: 0 auto 30px;}
.txt-flex#no2 { align-items: flex-end;}
.txt-flex#no3 { margin: 0 auto 50px;}
.txt-flex .stl { width: 30%;}
.txt-flex .stl img { width: 90%; max-width: 220px;
 transition: 0.3s ease-out 0.4s; opacity: 0; transform: translate(0,-30px);
}
.txt-flex .txt { width: 68%;}
.txt-flex#no3 .txt { padding-top: 50px;}
.txt-flex .txt p.marker { font-size: 30px;}
.txt-flex .txt p span.br{ display: block;}
.txt-flex.show { opacity: 1;}
.txt-flex.show .stl img { opacity: 1; transform: translate(0,0);}
@media (max-width: 641px) {
	.txt-flex .stl { width: 32%;}
	.txt-flex .txt { width: 68%;}
}
@media (max-width: 481px) {
	.txt-flex { margin: 0 auto 30px;}
	.txt-flex#no1 { width: 92%; margin: 0 auto 50px;}
	.txt-flex#no1 .stl{ padding-left: 10px;}
	.txt-flex#no1 .txt{ padding-left: 10px;}
	.txt-flex#no3 .txt{ padding-left: 10px;}
}


.tegaki { position: relative; width: 94%; max-width: 720px; margin: 0 auto; opacity: 0;}
.tegaki:before { content: ''; display: block; width: 100%;}
.tegaki.txt-1:before { height: 160px; background: url(../img/txt-1.png) no-repeat 0 0;}
.tegaki.txt-2:before { height: 220px; background: url(../img/txt-2.png) no-repeat 0 50%;}
.tegaki.txt-3:before { height: 150px; background: url(../img/txt-3.png) no-repeat 0 50%;}
.tegaki.txt-4:before { height: 160px; background: url(../img/txt-4.png) no-repeat 0 50%;}
.tegaki.show { animation: 0.4s ease-out zoomIn 0.2s forwards;}
@media (max-width: 641px) {
	.tegaki.txt-1 { margin: 0 0 20px;}
	.tegaki.txt-1:before { height: 110px; background-size: 100% auto;}
	.tegaki.txt-2:before { height: 180px; background-size: 100% auto;}
	.tegaki.txt-3 { margin: 0;}
	.tegaki.txt-3:before { height: 120px; background-size: 100% auto;}
	.tegaki.txt-4:before { height: 130px; background-size: 100% auto;}
}
@media (max-width: 481px) {
	.tegaki.txt-1:before { height: 80px;}
	.tegaki.txt-2:before { height: 110px;}
	.tegaki.txt-3:before { height: 80px;}
	.tegaki.txt-4:before { height: 90px;}
}



ul.note.mb { margin-bottom: 60px;}
ul.note li { position: relative; margin: 0 auto 5px; padding-left: 20px; font-size: 18px; font-weight: 700;}
ul.note li:before { content: '※'; position: absolute; left: 0; top: 0; font-size: 18px;}
@media (max-width: 641px) {
	ul.note.mb { margin-bottom: 30px;}
	ul.note li { font-size: 16px;}
	ul.note li:before {  font-size: 16px;}
}
@media (max-width: 641px) {
	ul.note li { margin: 0 auto 2px; padding-left: 15px; font-size: 13px;}
	ul.note li:before { font-size: 13px;}
}
@media (max-width: 481px) {
	ul.note li { padding-left: 15px; font-size: 12px;}
	ul.note li:before { font-size: 12px;}
}


#sct-1 { position: relative; padding-top: 60px;}
#sct-1 .ttl h1 img{ max-width: 830px;}
#sct-1 p.marker1 { margin: 40px 0;}
#sct-1 p.marker1 img{ width: 85%; max-width: 600px;}
#sct-1 .bloc-pl { margin: 0 auto 60px; padding-left: 25%;}
#sct-1 .bloc { position: relative; display: flex; flex-direction: row-reverse; align-items: flex-end;}
#sct-1 .bloc .img { width: 25%;}
#sct-1 .bloc .img img{ width: 100%;}
#sct-1 .bloc .txt { position: relative; width: 75%; z-index: 3;}
@media (max-width: 641px) {
	#sct-1 .bloc .img { width: 35%;}
	#sct-1 .bloc .txt { width: 65%;}
}
@media (max-width: 481px) {
	#sct-1 .bloc-pl { margin: 0 auto 40px; padding-left: 20%;}
	#sct-1 .bloc {justify-content: flex-end;}
	#sct-1 .bloc .txt { width: 60%;}
}


.bg-illust-1 { background: url(../img/bg-illust-1.png) no-repeat 100% 100%; background-size: auto 100%;
 transition: 0.3s ease-out; opacity: 0;
}
.bg-illust-2 { background: url(../img/bg-illust-2.png) no-repeat 0% 85%; background-size: auto 540px;
 transition: 0.3s ease-out; opacity: 0;
}
.bg-illust-1.txt-parts .inner-sct { transition: 0.3s ease-out 0.2s; opacity: 0;}
.bg-illust-2.txt-parts .inner-sct { padding-left: 12%; transition: 0.3s ease-out 0.2s; opacity: 0;}
.bg-illust-1 p.marker img{ width: 90%; max-width: 600px;}
.bg-illust-2 p.marker img{ width: 100%; max-width: 440px;}

.bg-illust-1.show,
.bg-illust-2.show { opacity: 1;}
.bg-illust-1.show .inner-sct,
.bg-illust-2.show .inner-sct { opacity: 1;}
@media (max-width: 481px) {
	.bg-illust-1{ margin: 0 auto 20px;}
}

#read-1-1,
#read-1-2,
#read-1-3 { transition: 0.3s ease-out; opacity: 0;}
#read-1-1.show,
#read-1-2.show,
#read-1-3.show { opacity: 1;}
#read-1-1 .inner-eng { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 620px; margin: 0 auto;}
#read-1-1 .eng { width: 25%;}
#read-1-1 .eng img{ width: 100%;}
#read-1-1 .txt { width: 70%;}
#read-1-1 .txt p span { display: block;}
#read-1-1 .txt p.marker img{ width: 90%; max-width: 440px;}
#read-1-2 { position: relative; margin-bottom: 40px; padding: 40px 0;}
#read-1-3 h3.copy { position: relative; text-align: center; z-index: 3;}
#read-1-3 h3.copy img.icn { position: absolute; right: 50%; top: -80px; width: 78px; margin-right: -300px; opacity: 0;}
#read-1-3 h3.copy img.marker { width: 92%; max-width: 620px; opacity: 0;}
#read-1-3 h3.copy.show img.icn  { animation: 0.3s ease-out fadeIn 0.3s forwards;}
#read-1-3 h3.copy.show img.marker { animation: 0.3s ease-out fadeIn 0.5s forwards;}
@media (max-width: 801px) {
	.bg-illust-2 { background-position: -60% 85%;}
	.bg-illust-2.txt-parts .inner-sct { padding-left: 25%;}
}
@media (max-width: 641px) {
	.bg-illust-1 { background-position: 220% 45%;}
	.bg-illust-2 { background-position: -100% 85%;}
	#read-1-3 h3.copy img.icn { width: 60px; top: -70px; right: 8%; margin-right: 0;}
}
@media (max-width: 481px) {
	.bg-illust-1 { padding-top: 40px; background-size: auto 330px;}
	.bg-illust-2 { background-position: -85% 85%; background-size: auto 60%;}
	.bg-illust-2.txt-parts .inner-sct { width: 94%; padding-left: 24%;}
	#read-1-2 { padding: 20px 0 0;}
	#read-1-3 h3.copy img.icn { width: 45px; top: -45px;}
}


#sct-2 { margin: 0 auto 40px; padding-top: 60px;}
#sct-2 .ttl h1 img{ max-width: 1000px;}
#sct-2 .message { width: 90%; max-width: 620px; margin: 0 auto; padding: 40px 0;
 transition: 0.3s ease-out; opacity: 0;
}
#sct-2 .message.show { opacity: 1;}
#read-2-1 { position: relative;}
#read-2-2 { position: relative; margin: 0 auto 40px; padding-top: 150px;}
#read-2-3 { position: relative;}
@media (max-width: 481px) {
	#sct-2 { margin: 0 auto 20px;}
	#read-2-2 { padding-top: 50px;}
	#read-2-3 { margin: 0 auto 60px;}
}


.bg-txt-1 { position: relative;}
.bg-txt-1 .inner { position: relative; width: 100%; max-width: 700px;
 margin: 0 auto; padding-bottom: 120px;
 background: url(../img/eng-txt-2.png) no-repeat 100% 92%; background-size: 120px auto; z-index: 3;
}
.bg-txt-1 figure { position: relative; width: 85%; max-width: 650px; margin: 0 auto 40px; z-index: 1;
 transition: 0.3s ease-out; opacity: 0;
}
.bg-txt-1 figure img{ width: 100%;}

.bg-txt-2 { position: relative;}
.bg-txt-2 .inner { position: relative; width: 100%; max-width: 700px; margin: 0 auto; padding-left: 150px;
 background: url(../img/eng-txt-3.png) no-repeat 0% 0%; background-size: 120px auto; z-index: 3;
}
.bg-txt-2 figure { position: relative; width: 85%; max-width: 650px; margin: 0 auto 40px; z-index: 2;
 transition: 0.3s ease-out; opacity: 0;
}
.bg-txt-2 figure img{ width: 100%;}

.bg-txt-3 { transition: 0.3s ease-out; opacity: 0;}
.bg-txt-3 .inner { width: 100%; max-width: 700px; margin: 0 auto;
 background: url(../img/eng-txt-4.png) no-repeat 100% 0%; background-size: 120px auto;
}
.bg-txt-3 figure { width: 85%; max-width: 650px; margin: 0 auto 40px;
 transition: 0.3s ease-out; opacity: 0;
}
.bg-txt-3 figure img{ width: 100%;}
.bg-txt-3.show { opacity: 1;}
.bg-txt-1 figure.show,
.bg-txt-2 figure.show,
.bg-txt-3 figure.show { opacity: 1;}
@media (max-width: 641px) {
	.bg-txt-1{ }
	.bg-txt-1 .inner { padding: 0 30px 60px;}
	.bg-txt-3 .inner { padding: 0 30px;}
}
@media (max-width: 481px) {
	.bg-txt-1 figure { margin: 0 auto 60px;}
	.bg-txt-1 .inner { padding: 0 20px 20px; background-size: 45px auto;}
	.bg-txt-2 figure { margin: 0 auto 50px;}
	.bg-txt-2 .inner { padding-left: 60px; background-size: 45px auto;}
	.bg-txt-3 figure { margin: 0 auto 50px;}
	.bg-txt-3 .inner { padding: 0 20px; background-size: 80px auto;}
}



#ex { position: relative; padding-top: 20px;}
#ex .bloc { position: relative; width: 100%; max-width: 800px; margin: 0 auto 60px; z-index: 3;
 transition: 0.4s ease-out; opacity: 0;}
#ex .bloc:after { content: ''; display: block; width: 100%; height: 100%;
 background: url(../img/bg-ptn-1.png);
 position: absolute; left: 0; top: 0; z-index: 1;
 transition: 0.2s ease-out 0.2s; transform: translate(0px, 0px);
}
#ex .bloc .inner { position: relative; padding: 30px; background: #fff; border: solid 4px #000; position: relative;
 transform: translate(-4px,-4px); z-index: 2;
}
#ex .bloc h3 { margin-bottom: 20px; font-size: 20px; line-height: 1; text-align: center;}
#ex .bloc h3 em { display: block; font-size: 60px;}
#ex .bloc .slide,
#ex .bloc .slide-movie { width: 100%; max-width: 620px; margin: 0 auto 10px;}
#ex .bloc .slide img,
#ex .bloc .slide-movie img { width: 100%; border: solid 1px #b9b9b9;}
#ex .bloc .slide-movie video { width: 100%;}
#ex .bloc p span { display: block;}
#ex p.memo { text-align: center;}
#ex .bloc.show { opacity: 1;} 
#ex .bloc.show:after { transform: translate(6px, 6px);}
@media (max-width: 641px) {
	#ex p.memo { font-size: 16px;}
}
@media (max-width: 481px) {
	#ex { margin-bottom: 20px; padding: 10px 0;}
	#ex .bloc { margin: 0 auto 30px;}
	#ex .bloc .inner { padding: 20px; border-width: 3px; transform: translate(-2px,-2px);}
	#ex .bloc:after { background-size: 5px;}
	#ex .bloc h3 { margin-bottom: 8px; font-size: 16px;}
	#ex .bloc h3 em { font-size: 30px;}
	#ex .bloc .slide,
	#ex .bloc .slide-movie { width: 90%; margin: 0 auto 15px;}
	#ex p.memo { font-size: 10px;}

	#ex .bloc.show:after { transform: translate(4px, 4px);}
}


#next { margin: 0 auto 40px;}
#next .box { position: relative; width: 65%; max-width: 500px; margin: 0 auto;
 transition: 0.4s ease-out; opacity: 0;
}
#next .box:after { content: ''; display: block; width: 100%; height: 100%; background: url(../img/bg-ptn-1.png);
 position: absolute; left: 0; top: 0; z-index: 1;
 transition: 0.2s ease-out 0.2s; transform: translate(0px, 0px);
}
#next .box .inner-box { position: relative; padding: 50px 0; background: #fff; border: solid 4px #000; position: relative;
 transform: translate(-4px,-4px); z-index: 2;
}
#next .box h2 { font-size: 60px; line-height: 1; text-align: center;}
#next .box p { font-size: 42px; line-height: 1; text-align: center;}
#next.show .box{ opacity: 1;} 
#next.show .box:after { transform: translate(6px, 6px);}

@media (max-width: 481px) {
	#next .box:after { transform: translate(3px,3px); background-size: 5px;}
	#next .box .inner-box { padding: 30px 0; border-width: 3px; transform: translate(-2px,-2px);}
	#next .box h2 { font-size: 40px;}
	#next .box p { font-size: 24px;}
}


#reason { position: relative; padding-top: 100px;}
/*
#reason .topic:before { content: ''; display: block; width: 78px; height: 150px;
 background: url(../img/icn-illust-2.png) no-repeat 50% 50% / cover;
 position: absolute; right: 50%; bottom: -100px; margin-right: -300px; z-index: 3;
 animation: 0.3s ease-out fadeIn forwards; opacity: 0;
}
*/
#reason .bloc { position: relative; width: 90%; max-width: 800px; margin: 0 auto 60px; z-index: 3;
 animation: 0.4s ease-out fadeIn forwards; opacity: 0;
}
#reason .bloc p.marker { margin-bottom: 20px; text-align: center;}
#reason .bloc p.marker img{ width: 90%; max-width: 540px;}
#reason .bloc figure { width: 100%; max-width: 620px; margin: 0 auto;}
#reason .bloc figure img { width: 100%;}
#reason .bloc .caption { position: absolute; left: 0; bottom: -10px; width: 100%;}
#reason .bloc .caption p{ width: 100%; max-width: 620px; margin: 0 auto; padding: 0 20px;}
#reason .bloc .caption img{ width: 60%; max-width: 320px;}
#reason .topic.show:before { opacity: 1;}
#reason .bloc.show { opacity: 1;}
@media (max-width: 641px) {
	#reason .topic:before { width: 60px; height: 115px; bottom: -80px; right: 5%; margin-right: 0;}
}
@media (max-width: 481px) {
	#reason { margin: 0 auto 30px; padding-top: 50px;}
	#reason .topic:before { width: 45px; height: 88px; bottom: -60px;}
	#reason .bloc { margin: 0 auto 30px;}
	#reason .bloc p { margin-bottom: 10px;}
}




#howto { position: relative; margin: 0 auto 80px; padding-top: 200px;}
#howto h3.invite { margin-bottom: 30px; text-align: center;}
#howto h3.invite img { width: 70%; max-width: 500px;}
#howto .box { position: relative; width: 80%; max-width: 500px; margin: 0 auto;}
#howto .box:after { content: ''; display: block; width: 100%; height: 100%; background: url(../img/bg-ptn-1.png);
 position: absolute; left: 0; top: 0; transform: translate(6px, 6px); z-index: 1;
}
#howto .box .inner-box { position: relative; padding: 30px 0; background: #fff; border: solid 4px #000; position: relative;
 transform: translate(-4px,-4px); z-index: 2;
}
#howto .box h2 { margin-bottom: 10px; font-size: 40px; text-align: center;}
#howto .box p { color: #1d9ae9; font-size: 60px; line-height: 1; text-align: center;}
#howto .box p:before { content: ''; display: inline-block; width: 50px; height: 50px; margin-right: 10px;
 border: solid 5px #1d9ae9; border-radius: 50%; vertical-align: middle;
}
#howto .box p span { display: inline-block; vertical-align: middle;}
#howto .slide { width: 90%; margin: 0 auto;}
#howto .slide img { width: 100%; border: solid 1px #b9b9b9;}
@media (max-width: 1001px) {
}
@media (max-width: 641px) {
	#howto { margin: 0 auto 40px; padding-top: 140px;}
}
@media (max-width: 481px) {
	#howto { padding-top: 40px;}
	#howto .box:after { transform: translate(3px, 3px); background-size: 5px;}
	#howto .box .inner-box { padding: 30px 0; border-width: 3px; transform: translate(-3px,-3px);}
	#howto .box h2 { margin-bottom: 10px; font-size: 24px;}
	#howto .box p { font-size: 40px;}
	#howto .box p:before { width: 30px; height: 30px; border-width: 3px;}
}



#rule { position: relative;}
#rule .slide-sche { margin: 0 auto 30px;}
#rule .slide-sche .slick-list{ padding-top: 10px;}
#rule .slide-sche .box{ position: relative; width: 92%; margin: 0 auto;
 background: url(../img/bg-ptn-1.png);
}
#rule .slide-sche .box .inner { position: relative; transform: translate(-6px,-6px);
 width: 100%; padding: 94px 0;
 background: #fff url(../img/bg-ptn-3.png) no-repeat 100% 100%; background-size: 100% 100%; border: solid 3px #000;
}
#rule .slide-sche .box p { font-size: 32px; line-height: 1.4; text-align: center;}
#rule .slide-sche .box p.date { font-size: 36px;}
#rule .slide-sche .box p.date em{ font-size: 42px;}
#rule .rule-box { position: relative; width: 90%; max-width: 800px;
 margin: 0 auto 50px; padding: 50px 0 30px;
 border: solid 3px #000; background: #fff; z-index: 3;
 transition: 0.4s ease-out; opacity: 0; transform: translate(0,20px);
}
#rule .rule-box h3 { position: absolute; left: -3px; top: -30px;}
#rule .rule-box h3 span{ display: inline-block; padding: 5px 10px; background: #000; color: #fff; font-size: 20px;}
#rule .rule-box ul { width: 90%; margin: 0 auto;}
#rule .rule-box ul li { position: relative; margin: 0 auto 8px; padding-left: 20px; font-size: 20px; font-weight: 700;}
#rule .rule-box ul li:last-child { margin: 0 auto;}
#rule .rule-box ul li:before{ content: ''; display: block; width: 12px; height: 12px; background: #000; border-radius: 50%;
 position: absolute; left: 0; top: 10px;
}

#rule .btn { position: relative; display: block; width: 90%; margin: 0 auto; background: #b31419;
 transition: 0.4s ease-out; opacity: 0;
}
#rule .btn a { position: relative; display: block; padding: 10px; background: #dc1c22;
 color: #fff; font-size: 24px; font-weight: 700; text-align: center; text-decoration: none;
 transition: 0.2s linear; transform: translate(-5px,-5px)
}
/*
#rule .btn a:before{ content:''; display: inline-block; width: 60px; height: 60px; margin-right: 10px;
 background: url(../img/icn-line.jpg) no-repeat 50% 50%; background-size: 100% 100%; vertical-align: middle;
}
*/
#rule .btn a span { display: inline-block; vertical-align: middle;}
#rule .btn a:hover { transform: translate( 0px, 0px);}
#rule .rule-box.show { opacity: 1; transform: translate(0,0);}
#rule .btn.show { opacity: 1;}
@media (max-width: 641px) {
	#rule .slide-sche .box .inner { padding: 90px 0;}
	#rule .slide-sche .box p { font-size: 24px;}
	#rule .slide-sche .box p.date { font-size: 30px;}
	#rule .slide-sche .box p.date em{ font-size: 36px;}
}
@media (max-width: 481px) {
	#rule .slide-sche { width: 90%;}
	#rule .slide-sche .box{ background-size: 5px;}
	#rule .slide-sche .box .inner { border-width: 2px; padding: 36px 0; transform: translate(-3px,-3px)}
	#rule .slide-sche .box p { font-size: 20px;}
	#rule .slide-sche .box p.date { font-size: 21px;}
	#rule .slide-sche .box p.date em{ font-size: 26px;}
	#rule .rule-box { width: 92%; margin: 0 auto 30px; padding: 25px 0 10px; border-width: 2px;}
	#rule .rule-box h3 { left: -2px;}
	#rule .rule-box h3 span{ font-size: 16px;}
	#rule .rule-box ul li { margin: 0 auto 4px; padding-left: 15px; font-size: 14px;}
	#rule .rule-box ul li:last-child { margin: 0 auto;}
	#rule .rule-box ul li:before{ width: 8px; height: 8px; top: 7px;}
	#rule .btn { width: 94%;}
	#rule .btn a { padding: 12px 0; font-size: 16px;}
	#rule .btn a:before{ width: 30px; height: 30px;}
}



#career { position: relative; padding-top: 200px;}
#career figure { width: 92%; max-width: 660px; margin: 0 auto; transition: 0.3s linear; opacity: 0;}
#career figure img{ width: 100%;}
#career h3 img{ width: 90%; max-width: 520px;}
#career figure.show { opacity: 1;}
@media (max-width: 641px) {
	#career { padding-top: 120px;}
}
@media (max-width: 481px) {
	#career { padding-top: 100px;}
}




#case { position: relative; margin: 0 auto 40px;}
#case .bloc { position: relative; width: 90%; max-width: 720px; margin: 0 auto 40px; z-index: 3;
 transition: 0.4s ease-out; opacity: 0;
}
#case .bloc:last-child { margin: 0 auto;}
#case .bloc:after { content: ''; display: block; width: 100%; height: 100%;
 background: url(../img/bg-ptn-1.png);
 position: absolute; left: 0; top: 0; z-index: 1;
 transition: 0.3s ease-out 0.2s; transform: translate(0px, 0px);
}
#case .bloc .inner { position: relative; background: #fff; border: solid 4px #000; position: relative;
 transform: translate(-4px,-4px); z-index: 2;
}
#case .case-ttl { position: relative; padding: 15px 80px 15px 180px; background: #000; color: #fff;
 cursor: pointer;
}
#case .case-ttl:after { content: ''; display: block; width: 20px; height: 20px;
 border-top: solid 3px #fff; border-left: solid 3px #fff;
 position: absolute; top: 52%; right: 20px; transition: 0.3s linear;
 transform: translate(-10px, -15px) rotate(225deg); transform-origin: center;
}
#case .case-ttl.open:after { top: 35%; transform: translate(-10px,0px) rotate(45deg);}
#case .case-ttl span { position: absolute; left: 50px; top: 50%; transform: translate(0, -50%);
 font-size: 30px; font-weight: 700;
}
#case .case-ttl p { font-size: 24px; line-height: 1.4; font-weight: 700;}
#case .case-ctn { display: none; padding: 30px;}
#case .case-ctn figure { width: 100%; margin: 0 auto 30px;}
#case .case-ctn figure img{ width: 100%; margin: 0 auto; border: solid 1px #b9b9b9;}
#case .case-ctn figure figcaption { display: block; margin-top: 20px; padding: 6px 0; border-bottom: solid 2px #000;
 font-size: 20px; font-weight: 700;
}
#case .case-ctn dl { background: #f2f2f2;}
#case .case-ctn dl dt { padding: 15px 0; border-bottom: dashed 2px #000; font-size: 20px; font-weight: 700; text-align: center;}
#case .case-ctn dl dt span { display: inline-block; margin-right: 20px;}
#case .case-ctn dl dd { padding: 30px; font-size: 20px; font-weight: 700;}


#case .bloc.show{ opacity: 1;} 
#case .bloc.show:after { transform: translate(6px, 6px);}

@media (max-width: 641px) {
	#case .case-ttl { padding: 10px 80px 10px 150px;}
	#case .case-ttl span { left: 35px; font-size: 24px;}
	#case .case-ttl p { font-size: 20px;}
	#case .case-ctn p { font-size: 15px;}
	#case .case-ctn dl dt { font-size: 18px;}
	#case .case-ctn dl dd { padding: 20px; font-size: 15px;}
}
@media (max-width: 481px) {
	#case .bloc { margin: 0 auto 20px;}
	#case .bloc:after { background-size: 5px;}
	#case .bloc .inner { border-width: 3px; transform: translate(-2px,-2px);}
	#case .case-ttl { padding: 8px 50px 8px 100px;}
	#case .case-ttl:after { width: 10px; height: 10px; border-width: 2px; right: 10px;
	 transform: translate(-5px, -10px) rotate(225deg);
	}
	#case .case-ttl.open:after { top: 38%; transform: translate(-5px, 0px) rotate(45deg);}
	#case .case-ttl span { left: 20px; font-size: 18px;}
	#case .case-ttl p { font-size: 16px;}
	#case .case-ctn { padding: 18px;}
	#case .case-ctn figure { margin: 0 auto 15px;}
	#case .case-ctn figure figcaption { margin-top: 10px; font-size: 16px;}
	#case .case-ctn p { font-size: 13px;}
	#case .case-ctn dl dt { font-size: 15px;}
	#case .case-ctn dl dd { padding: 15px; font-size: 13px;}
	
	#case .bloc.show:after { transform: translate(3px, 3px);}
}



#about { position: relative; padding-top: 100px;}
#about p.marker { margin-bottom: 40px; text-align: center;}
#about p.marker img { width: 80%; max-width: 600px;}
#about .box { position: relative; width: 100%; transition: 0.4s linear; opacity: 0;}
#about .box#box-3 { background: url(../img/bg-illust-3.jpg) no-repeat 50% 50%; background-size: auto 100%;}
#about .box .inner{ position: relative; width: 90%; max-width: 700px; margin: 0 auto; z-index: 2;}
#about .box#box-1 .inner{ padding: 60px 0;}
#about .box#box-1 .fig { width: 480px; height: 450px; z-index: 1;
 position: absolute; right: 50%; top: 50%; margin-right: -500px;
 background: url(../img/triangle-1.png) no-repeat 0% 50% / cover;
 transition: 0.4s ease-out 0.4s; opacity: 0; transform: translate(40px,-50%);
}
#about .box#box-1 p em { display: inline-block; margin: 0 -5px;}
#about .box#box-2 .inner{ padding: 60px 0; padding-left: 18%;}
#about .box#box-2 .fig {	width: 480px; height: 580px; z-index: 1;
 position: absolute; left: 50%; top: 50%; margin-left: -580px;
 background: url(../img/triangle-2.png) no-repeat 100% 50% / cover;
 transition: 0.4s ease-out 0.4s; opacity: 0; transform: translate(-40px,-50%);
}
#about .box#box-3 .inner{ padding: 120px 0 150px;}
#about .box#box-3 p { text-align: center;}
#about .box.show { opacity: 1;}
#about .box.show .fig { opacity: 1 !important; transform: translate(0,-50%) !important;}

@media (max-width: 1201px) {
	#about .box { overflow: hidden;}
	#about .box#box-1 .fig { width: 400px; height: 380px; right: 0; margin-right: 0;}
	#about .box#box-2 .fig { width: 350px; left: 0; margin-left: 0;}
}
@media (max-width: 1001px) {
	#about .box#box-2 .inner{ padding-left: 250px;}
	#about .box#box-2 .fig { width: 300px; left: 0;}
}
@media (max-width: 801px) {
	#about .box#box-1 .fig { width: 300px; height: 280px;}
	#about .box#box-2 .fig { width: 240px; height: 380px;}
}
@media (max-width: 641px) {
	#about .box#box-1 .inner{ padding: 30px 0;}
	#about .box#box-1 .fig { width: 240px; height: 280px;}
	#about .box#box-2 .inner{ padding: 30px 0; padding-left: 200px;}
	#about .box#box-2 .fig { width: 200px; height: 380px;}
	#about .box#box-3 .inner{ padding: 80px 0 120px;}
	#about p span { display: block;}
}
@media (max-width: 481px) {
	#about { padding-top: 60px;}
	#about p.marker { margin-bottom: 20px;}
	#about .box#box-1 .inner { padding: 20px 0 60px;}
	#about .box#box-1 .fig { width: 160px; height: 200px; transform: translate(0,-48%);}
	#about .box#box-2 .inner{ padding: 20px 0; padding-left: 100px;}
	#about .box#box-2 .fig { width: 110px; height: 220px;}
	#about .box#box-3 .inner{ padding: 80px 0 100px;}
}


#creative{ transition: 0.4s ease-out; opacity: 0;}
#creative.show{ opacity: 1;}
#creative .slide-movie { width: 90%; max-width: 620px; margin: 0 auto;}
/*
#creative .slide-movie .movie { position: relative; width: 100%; padding-top: 75%;}
#creative .slide-movie iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
*/
#creative .slide-movie .movie img { width: 100%;}

#company{ transition: 0.4s ease-out; opacity: 0;}
#company.show{ opacity: 1;}
ul.companydata { width: 100%; max-width: 600px; margin: 0 auto;}
ul.companydata li { margin: 0 auto 10px;}
ul.companydata li dl { display: table; width: 100%;}
ul.companydata li dl dt,
ul.companydata li dl dd { display: table-cell; font-size: 20px; font-weight: 700;}
ul.companydata li dl dt { width: 20%;}
ul.companydata li dl dd { width: 80%;}
@media (max-width: 641px) {
	ul.companydata li dl dt,
	ul.companydata li dl dd { font-size: 16px;}
}
@media (max-width: 481px) {
	ul.companydata li { margin: 0 auto 6px;}
	ul.companydata li dl dt,
	ul.companydata li dl dd { font-size: 12px;}
}

#map { width: 100%; height: 450px;}
#map #mapView{ width: 100%; height: 100%;}
@media (max-width: 481px) {
	#map { height: 240px;}
}



.paint-01{ display: block; width: 580px; height: 440px; opacity: 0;
 background: url(../img/paint-01.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; top: 45%; margin-right: -700px;
}
#sct-1 .bloc:before {content: ''; display: block; width: 460px; height: 420px; opacity: 0;
 background: url(../img/paint-02.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: -130px; margin-left: -600px;
}
#read-1-2:before { content: ''; display: block; width: 350px; height: 260px; opacity: 0;
 background: url(../img/paint-03.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 10%; top: 0%;
}
#read-1-3:before { content: ''; display: block; width: 240px; height: 240px; opacity: 0;
 background: url(../img/paint-04.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: 45%; margin-left: -400px;
}
#read-2-1:before { content: ''; display: block; width: 350px; height: 420px; opacity: 0;
 background: url(../img/paint-05.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; top: -380px; margin-right: -480px; z-index: 1;
}
.bg-txt-1:before { content: ''; display: block; width: 240px; height: 205px; opacity: 0;
 background: url(../img/paint-06.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; top: 185px; margin-right: -420px; z-index: 2;
}
#read-2-2:before { content: ''; display: block; width: 370px; height: 330px; opacity: 0;
 background: url(../img/paint-07.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: -120px; margin-left: -520px; z-index: 1;
}
.bg-txt-2:before { content: ''; display: block; width: 290px; height: 140px; opacity: 0;
 background: url(../img/paint-08.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; top: 260px; margin-right: -520px; z-index: 1;
}
#ex:before { content: ''; display: block; width: 330px; height: 310px; opacity: 0;
 background: url(../img/paint-09.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: 0px; margin-left: -500px; z-index: 2;
}
#ex:after { content: ''; display: block; width: 340px; height: 300px; opacity: 0;
 background: url(../img/paint-10.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; top: 55%; margin-right: -460px; z-index: 1;
}
.paint-11 { display: block; width: 320px; height: 280px; opacity: 0;
 background: url(../img/paint-11.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: 0px; margin-left: -470px; z-index: 1;
}
.paint-12 { display: block; width: 430px; height: 330px; opacity: 0;
 background: url(../img/paint-12.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; top: 52%; margin-right: -520px; z-index: 1;
}
#read-2-3:before { content: ''; display: block; width: 420px; height: 270px; opacity: 0;
 background: url(../img/paint-13.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: 480px; margin-left: -600px; z-index: 1;
}
#howto:before { content: ''; display: block; width: 460px; height: 290px; opacity: 0;
 background: url(../img/paint-14.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; top: 0px; margin-right: -580px; z-index: 1;
}
.paint-15 { display: block; width: 280px; height: 370px; opacity: 0;
 background: url(../img/paint-15.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; bottom: 200px; margin-right: -500px; z-index: 1;
}
#rule:before { content: ''; display: block; width: 270px; height: 230px; opacity: 0;
 background: url(../img/paint-16.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: 300px; margin-left: -520px; z-index: 1;
}
.paint-17 { content: ''; display: block; width: 280px; height: 280px; opacity: 0;
 background: url(../img/paint-17.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; bottom: 220px; margin-right: -440px; z-index: 1;
}
#career:before { content: ''; display: block; width: 320px; height: 320px; opacity: 0;
 background: url(../img/paint-18.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: 0px; margin-left: -480px; z-index: 1;
}
.paint-19 { content: ''; display: block; width: 300px; height: 430px; opacity: 0;
 background: url(../img/paint-19.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; bottom: 400px; margin-right: -520px; z-index: 1;
}
#case:before { content: ''; display: block; width: 320px; height: 240px; opacity: 0;
 background: url(../img/paint-20.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: 10%; margin-left: -480px; z-index: 2;
}
#case:after { content: ''; display: block; width: 400px; height: 210px; opacity: 0;
 background: url(../img/paint-21.png) no-repeat 0% 50% / auto 100%;
 position: absolute; right: 50%; bottom: 10%; margin-right: -500px; z-index: 1;
}
#about:before { content: ''; display: block; width: 340px; height: 300px; opacity: 0;
 background: url(../img/paint-22.png) no-repeat 100% 50% / auto 100%;
 position: absolute; left: 50%; top: 0px; margin-left: -500px; z-index: 1;
}


.paint-01.show{ animation: 0.4s ease-out zoomIn 0.8s forwards;}
#sct-1 .bloc.show:before { animation: 0.4s ease-out zoomIn 0.2s forwards;}
#read-1-2.show:before { animation: 0.4s ease-out zoomIn 0.0s forwards;}
#read-1-3.show:before { animation: 0.4s ease-out zoomIn 0.2s forwards;}
#read-2-1.show:before { animation: 0.4s ease-out zoomIn 0.0s forwards;}
.bg-txt-1.show:before { animation: 0.4s ease-out fadeIn 0.2s forwards;}
#read-2-2.show:before { animation: 0.4s ease-out zoomIn 0.2s forwards;}
.bg-txt-2.show:before { animation: 0.4s ease-out zoomIn 0.2s forwards;}
#ex.show:before { animation: 0.4s ease-out zoomIn 0.2s forwards;}
#ex.show:after  { animation: 0.4s ease-out zoomIn 0.2s forwards;}
.paint-11.show { animation: 0.4s ease-out zoomIn 0.2s forwards;}
.paint-12.show { animation: 0.4s ease-out zoomIn 0.2s forwards;}
#read-2-3.show:before { animation: 0.4s ease-out zoomIn 0.2s forwards;}
#howto.show:before{ animation: 0.3s ease-out fadeIn 0.2s forwards;}
.paint-15.show { animation: 0.4s ease-out zoomIn 0.2s forwards;}
#rule.show:before { animation: 0.4s ease-out zoomIn 0.2s forwards;}
.paint-17.show { animation: 0.4s ease-out zoomIn 0.2s forwards;}
#career.show:before{ animation: 0.4s ease-out zoomIn 0.2s forwards;}
.paint-19.show { animation: 0.4s ease-out zoomIn 0.2s forwards;}
#case.show:before { animation: 0.4s ease-out fadeIn 0.2s forwards;}
#case.show:after  { animation: 0.4s ease-out fadeIn 0.2s forwards;}
#about.show:before{ animation: 0.4s ease-out zoomIn 0.2s forwards;}

@media (max-width: 1401px) {
	.paint-01 { right: 0%;  margin-right: 0px;}
}
@media (max-width: 1201px) {
	.paint-01 { width: 400px; transform-origin: right center;}
	#read-1-2:before{ right: 0%;}
	#ex:after { right: 0%; margin-right: 0px;}
	.paint-12 { right: 0%; margin-right: 0px;}
	#howto:before { right: 0%; margin-right: 0px;}
	.paint-15 { right: 0%; margin-right: 0px;}
}
@media (max-width: 1001px) {
	#read-2-1:before { right: 0%; margin-right: 0px;}
	.bg-txt-2:before { right: 0%; margin-right: 0px;}
	#career:after { right: 0%; margin-right: 0px;}
	.paint-19 { right: 0%; margin-right: 0px;}
	#case:after { right: 0%; margin-right: 0px;}
}
@media (max-width: 801px) {
	.paint-01 { width: 250px;}
	#read-1-2:before{ width: 150px; transform-origin: right center;}
	#read-1-3:before { width: 120px; left: 0%; margin-left: 0px;}
	#read-2-1:before { width: 250px; height: 380px; transform-origin: right center;}
	.bg-txt-1:before { width: 200px; height: 180px; right: 0%; margin-right: 0px;}
	#read-2-2:before { width: 250px; left: 0%; margin-left: 0px; transform-origin: left center;}
	.bg-txt-2:before { width: 250px; transform-origin: right center;}
	#ex:after { width: 240px;}
	.paint-11 { width: 200px; left: 0%; margin-left: 0px; transform-origin: left center;}
	.paint-12 { width: 280px;}
	#howto:before { width: 300px;}
	.paint-15 { width: 150px; transform-origin: right center;}
	#rule:before { width: 180px; left: 0%; margin-left: 0px; transform-origin: left center;}
	.paint-17 { width: 200px; right: 0%; margin-right: 0px; transform-origin: right center;}
	#career:before{ width: 200px; left: 0%; margin-left: 0px; transform-origin: left center;}
	.paint-19 { width: 180px; transform-origin: right center;}
	#case:before{ width: 220px; left: 0%; margin-left: 0px;}
	#case:after { width: 250px;}
}
@media (max-width: 641px) {
	.paint-01 { width: 200px; height: 300px;}
	.bg-txt-1:before { top: 150px; right: 0%; margin-right: 0px;}
	.bg-txt-2:before { width: 130px; height: 120px; top: 200px;}
	.paint-12 { transform-origin: right center;}
	#howto:before { top: -80px;}
	#career:before{ width: 160px; height: 200px;}
	.paint-19 { width: 120px; height: 260px; bottom: 400px;}
}
@media (max-width: 481px) {
	.paint-01 { width: 120px; height: 260px; top: 40%;}
	#sct-1 .bloc:before { width: 140px; height: 200px; left: -6%; top: -50px; margin-left: 0px; transform-origin: left center;}
	#read-1-2 { padding: 20px 0 0;}
	#read-1-2:before{ width: 70px; height: 140px;}
	#read-1-3:before { width: 50px; height: 120px; top: 48%;}
	#read-2-1:before { width: 100px; height: 180px; top: -120px;}
	.bg-txt-1:before { width: 80px; height: 90px; top: 110px;}
	#read-2-2:before { width: 120px; height: 150px; top: -40px;}
 	#read-2-3:before { width: 110px; height: 150px; left: 0%; top: 300px; margin-left: 0px;}
	.bg-txt-2:before { width: 80px; height: 65px; top: 120px;}
	#ex:before { width: 150px; height: 150px;}
 	#ex:after { width: 120px; height: 150px;}
	#ex .bloc:after { transform: translate(3px,3px);}
	.paint-11 { width: 100px; height: 160px;}
	.paint-12 { width: 120px; height: 160px;}
	#howto:before { width: 110px; height: 120px; top: -50px;}
	.paint-15 { width: 60px; height: 150px; bottom: 200px;}
	#rule:before { width: 80px; height: 100px; top: 200px;}
	.paint-17 { width: 80px; height: 100px;}
	#career:before{ width: 90px; height: 150px;}
	.paint-19 { width: 80px; height: 160px; bottom: 280px;}
	#case:before{ width: 60px; height: 80px;}
	#case:after { width: 100px; height: 100px;}
	#about:before { width: 80px; height: 150px; left: 0%; margin-left: 0px;}
}

.popup-video video{ width: 100%;}





/* page of form */
.message-win { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 1002;
	background: rgba(0,0,0,.8);
}
.message-win .win-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
 width: 85%; max-width: 400px; padding: 50px 20px; background: #fff; opacity: 0;
 animation: 0.4s fadeIn linear 0.5s forwards;
}
.message-win .win-box p { margin-bottom: 30px; font-size: 14px; font-weight: 400; text-align: center;}
.message-win .win-box ul { width: 100%; text-align: center;}
.message-win .win-box ul li { display: inline-block; width: 45%; margin: 0 auto;}
.message-win .win-box ul li span { display: block; width: 100%; padding: 8px 0;
 background: #eee; border: solid 1px #ccc; border-radius: 3px;
 font-size: 14px; cursor: pointer;
}
.message-win .win-box ul li:hover span{ background: #fcfcfc;}
@media (max-width: 481px) {
	.message-win .win-box { padding: 40px 12px; transform: translate(-50%,-60%);}
	.message-win .win-box p { margin-bottom: 20px;}
}

#entry-kv { width: 100%; height: 100vh; margin: 0 auto 80px; background: #000;}
#entry-kv .movie { position: relative; width: 100%; height: 100%;}
#entry-kv .movie video { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#entry-kv .movie video#sp-view { display: none;}

#entry-kv .hero_scroll { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); z-index: 10;
 text-align: center; opacity: 0; animation: 1.0s linear fadeIn 12.0s forwards;
}


#entryform .inner-entry { width: 92%; max-width: 800px; margin: 0 auto 80px;}
#entryform ul { margin: 0 auto 40px;}
#entryform ul li { margin: 0 auto 20px;}
#entryform ul li:last-child { margin: 0 auto;}
#entryform ul li dl dt { margin-bottom: 8px; font-size: 20px; font-weight: 700;}
#entryform ul li dl dt em { font-size: 30px; vertical-align: middle;}
#entryform ul li dl dt span.text { display: inline-block; font-size: 24px; vertical-align: middle:}
#entryform ul li dl dt span.must { display: inline-block; width: 50px; background: #d8282d;
 color: #fff; font-size: 18px; line-height: 1.4; text-align: center; vertical-align: middle:
}
#entryform ul li dl dd.sub { margin-bottom: 10px; font-size: 24px; font-weight: 700;}
#entryform ul li dl dd input[type="text"],
#entryform ul li dl dd input[type="email"] { width: 100%; padding: 5px 10px; border: solid 2px #000; background: #f5f5f5;}

#entryform ul li dl dd span.bloc { position: relative; display: inline-block; width: 28%; margin-bottom: 4px; font-weight: 700;}
#entryform ul li dl dd input[type="radio"] { position: absolute; left: 5px; top: 4px; z-index: 1;}
#entryform ul li dl dd input[type="radio"] + label{ padding: 6px 0 5px 40px; position:relative;}
#entryform ul li dl dd input[type="radio"] + label::before{ content: ""; display: block;
 width: 21px; height: 21px; border: 2px solid #000; border-radius: 50%; background: #fff; z-index: 2;
 position: absolute; top: 0; left: 0;
}
#entryform ul li dl dd input[type="radio"]:checked + label{}
#entryform ul li dl dd input[type="radio"]:checked + label::after{ content: ""; display: block;
 width: 15px; height: 15px; background: #d8282d; border-radius: 50%; z-index: 3;
 position: absolute; top: 5px; left: 5px;
}

#entryform ul li dl dd textarea { width: 100%; height: 150px; padding: 5px 10px; border: solid 2px #000; background: #f5f5f5;}
#entryform .send { position: relative; width: 100%; background: #ac1c20;}
#entryform .send input[type="submit"] { display: block; width: 100%; padding: 15px 0; border: none;
 background: #d8282d; color: #fff; font-size: 24px; font-weight: 700; text-align: center;
 position: relative; top: -4px; left: -4px; transition: 0.2s linear; pointer-events: auto !important;
}
#entryform .send input[type="submit"]:hover { top: 0; left: 0; background: #e05357;}

@media (max-width: 801px) {
	#entry-kv .movie video#pc-view { display: block;}
	#entry-kv .movie video#sp-view { display: none;}
}
@media (max-width: 641px) {
	#entry-kv { margin: 0 auto 40px;}
	#entryform ul li dl dt { font-size: 18px;}
	#entryform ul li dl dt em { font-size: 24px;}
	#entryform ul li dl dt span.text { font-size: 20px;}
	#entryform ul li dl dd.sub { font-size: 18px;}
}
@media (max-width: 481px) {
	#entryform ul li dl dt { font-size: 15px;}
	#entryform ul li dl dt em { font-size: 18px;}
	#entryform ul li dl dt span.must { width: 40px; font-size: 14px;}
	#entryform ul li dl dt span.text { font-size: 16px;}
	#entryform ul li dl dd.sub { font-size: 15px;}
	#entryform .send input[type="submit"] { padding: 150x 0; font-size: 18px;}
}

.entryIframe { width: 92%; max-width: 900px; margin: 0 auto 80px;}
.entryIframe iframe { width: 100%;}


#qa { width: 92%; max-width: 800px; margin: 0 auto;}
#qa p.lead { margin-bottom: 30px; font-size: 28px;}
#qa .box { margin: 0 auto 40px; border: solid 3px #000;
 transition: 0.3s ease-out; opacity: 0;
}
#qa .box .q-ttl { position: relative; padding: 15px 30px 15px 100px; font-size: 24px; font-weight: 700;}
#qa .box .q-ttl span.eng{ position: absolute; left: 30px; top: 50%;
 font-size: 56px; font-weight: 700; transform: translate(0,-50%);
}
#qa .box .q-ttl span.note { display: block; padding-left: 25px; text-indent: -20px; font-size: 22px; line-height: 1.4;}
#qa .box .q-ans { padding: 30px; border-top: dotted 3px #000;}
#qa .box .q-ans ul { font-size: 0;}
#qa .box .q-ans ul li { position: relative; display: inline-block; width: 32%; padding-left: 20px;
 font-size: 28px; font-weight: 700;
}
#qa .box .q-ans ul li:before { content: ''; display: block; width: 12px; height: 12px;
 background: #000; border-radius: 50%;
 position: absolute; left: 0; top: 16px;
}
#qa .box .q-ans figure{ width: 100%; margin: 0 auto;}
#qa .box .q-ans figure img{ width: 100%;}
#qa .box .q-ans .tweet { width: 100%; max-width: 550px; margin: 0 auto 20px;}
#qa .box .q-ans .youtube { width: 100%; }
#qa .box .q-ans .youtube .movie { position: relative; width: 100%; margin: 0 auto 20px; padding-top: 56.25%;}
#qa .box .q-ans .youtube .movie iframe { width: 100%; height: 100%;
 position: absolute; left: 0; top :0;
}

#qa .box .q-ans dl.answer { position: relative; width: 100%; margin: 0 auto; padding: 20px 10px 50px;}
#qa .box .q-ans dl.answer dt { position: absolute; bottom: 0;
 width: 100%; padding: 8px; background: #000; cursor: pointer;
 color: #fff; font-size: 21px; font-weight: 700; text-align: center;
}
#qa .box .q-ans dl.answer dt span.close { display: none;}
#qa .box .q-ans dl.answer dd { display: none; position: relative; padding: 8px 0 20px 50px;
 color: #d8282d; font-size: 24px; font-weight: 700;}
#qa .box .q-ans dl.answer dd span.eng { position: absolute; left: 0; top: 50%; transform: translate(0,-52%);
	font-size: 50px;
}
#qa .box .q-ans dl.answer dd span.txt{ font-size: 21px;}

#qa .box .q-ans dl.answer dt.open span.def { display: none;}
#qa .box .q-ans dl.answer dt.open span.close { display: block;}

#qa .box.show { opacity: 1;}
@media (max-width: 1001px) {
	#qa p.lead { margin-bottom: 20px; font-size: 24px;}
	#qa .box .q-ttl { padding: 15px 30px 15px 80px; font-size: 21px;}
	#qa .box .q-ttl span.eng{ left: 20px; font-size: 50px;}
	#qa .box .q-ttl span.note { font-size: 18px;}

	#qa .box .q-ans ul li { padding-left: 15px; font-size: 21px;}
	#qa .box .q-ans ul li:before { width: 10px; height: 10px; top: 10px;}
	#qa .box .q-ans dl.answer dt { font-size: 18px;}
	#qa .box .q-ans dl.answer dd { padding: 8px 0 20px 50px; font-size: 20px;}
	#qa .box .q-ans dl.answer dd span.eng { font-size: 40px;}
}
@media (max-width: 641px) {
	#qa p.lead { font-size: 21px;}
	#qa .box .q-ttl { padding: 15px 20px 15px 70px; font-size: 18px;}
	#qa .box .q-ttl span.eng{ font-size: 40px;}
	#qa .box .q-ttl span.note { font-size: 18px;}
	#qa .box .q-ans { padding: 20px;}
	#qa .box .q-ans ul li { padding-left: 15px; font-size: 18px;}
	#qa .box .q-ans ul li:before { width: 10px; height: 10px; top: 10px;}
	#qa .box .q-ans dl.answer { padding: 10px 0 40px;}
	#qa .box .q-ans dl.answer dt { font-size: 18px;}
	#qa .box .q-ans dl.answer dd span.txt{ font-size: 18px;}
}
@media (max-width: 481px) {
	#qa p.lead { font-size: 15px;}
	#qa .box { margin: 0 auto 20px; border-width: 2px;}
	#qa .box .q-ttl { padding: 12px 10px 12px 40px; font-size: 14px;}
	#qa .box .q-ttl span.eng{ left: 10px; font-size: 30px;}
	#qa .box .q-ttl span.note { font-size: 13px;}
	#qa .box .q-ans { padding: 10px 20px;}
	#qa .box .q-ans ul li { padding-left: 10px; font-size: 16px;}
	#qa .box .q-ans ul li:before { width: 6px; height: 6px; top: 8px;}
	#qa .box .q-ans dl.answer { padding: 10px 0 40px;}
	#qa .box .q-ans dl.answer dt { padding: 6px; font-size: 15px;}
	#qa .box .q-ans dl.answer dd { padding: 8px 0 10px 40px; font-size: 16px;}
	#qa .box .q-ans dl.answer dd span.eng { font-size: 32px;}
	#qa .box .q-ans dl.answer dd span.txt{ font-size: 14px;}
}

/* 2021-04-05 ADD*/
.red{color: #d8282d;}