@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */

/* ---------------------------------------------------
#main_img
------------------------------------------------------ */
#main_tit { position: relative; text-align: center; padding: 0;}
#main_tit,#main_tit .slide_fade { height: calc(100vh - 88px);}
#main_tit .slide_fade .slides,
#main_tit .slide_fade .slides li,
#main_tit .slide_fade .slides img { height: 100%;}

#main_tit h1 { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0;}
#main_tit h1 span { display: block; font-size: 23px; margin-top: 25px; padding-right: 0; font-family: inherit;}


#svg_tit { width: 50%; max-width: 850px; height: 6vw;}
#svg_tit path { fill:none;stroke:#fff;stroke-miterlimit:10;}
#svg_tit .cls-1.start { -webkit-animation: svgtext1 2s .5s forwards; animation: svgtext1 2s .5s forwards;}
#svg_tit .cls-2.start { -webkit-animation: svgtext2 2s 2s forwards; animation: svgtext2 2s 2s forwards;}
#svg_tit .cls-3.start { -webkit-animation: svgtext2 3.5s 3s forwards; animation: svgtext2 3.5s 3s forwards;}

_:-ms-input-placeholder, #svg_tit .cls-1.start {
   stroke:#fff; stroke-dasharray: 0!important;
}

_:-ms-input-placeholder, #svg_tit .cls-2.start, #svg_tit .cls-3.start {
   stroke:#fff; fill: #fff; stroke-dasharray: 0!important;
}

@-webkit-keyframes svgtext1 {
  100% { stroke-dashoffset: 0px;}
}
@keyframes svgtext1 {
  100% { stroke-dashoffset: 0px;}
}

@-webkit-keyframes svgtext2 {
  80% {  stroke-dashoffset: 0px;}
  100% { fill:rgba(255,255,255,1); stroke-dashoffset: 0px;}
}
@keyframes svgtext2 {
  80% {  stroke-dashoffset: 0px; fill: rgba(255,255,255,0);}
  100% { fill:rgba(255,255,255,1); stroke-dashoffset: 0px;}
}

#scroll {
  display: block; position: absolute; bottom: 0; left: 3%; z-index: 10; color: #fff;
  -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding: 0 0 60px 5px; font-size: 10px; box-sizing: border-box; overflow-y: hidden;
}
#scroll::before {
  content: ''; display: block; width: 1px; height: 100%; background: #fff; position: absolute; top: 0; left: 0;
  -webkit-animation: scroll_top 2.5s infinite; animation: scroll_top 2.5s infinite;
}

#news_col { width: 90%; min-width: 1080px; display: flex; position: absolute; bottom: 0; right: 0; z-index: 10; background: #fff;}
#news_col p.en_font { width: calc((100% - 380px) * 0.25); padding: 15px 0; font-size: 25px; border-right: 1px solid #d2d2d2;}
#news_col #feed { width: calc((100% - 380px) * 0.75); padding: 0 0 0 5%; box-sizing: border-box; display: flex; align-items: center;}
#news_col #feed ul { width: 100%; text-align: left; position: relative; display: flex; align-items: center;}
#news_col #feed .slick-slide { padding-right: 20px;}
#news_col #feed li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1;}
#news_col #feed a { border-bottom: 1px solid #666666;}
#news_col #feed a:hover { border-color: transparent;}
#news_col #feed a span { padding-right: 15px;}
#news_col > a { width: 180px; display: block; background: #000; color: #fff; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: background-color .3s;}
#news_col > a:hover { background: #4b4b4b;}
#news_col .page { width: 240px; text-align: center; position: relative;}
#news_col .page p { display: flex; align-items: center; justify-content: center; height: 100%;}
#news_col .page span { padding: 0 15px;}
#news_col .news_arrow { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#news_col .news_arrow .slick-prev { left: 40px; transition: left .3s;}
#news_col .news_arrow .slick-next { right: 40px; transition: right .3s;}
#news_col .news_arrow .slick-prev::before,
#news_col .news_arrow .slick-next::before { font-family: inherit; color: #1a1312; opacity: 1;}
#news_col .news_arrow .slick-prev:hover { left: 35px;}
#news_col .news_arrow .slick-next:hover { right: 35px;}

@-webkit-keyframes scroll_top {
  0% { transform: scaleY(0); transform-origin: top center;}
  50% { transform: scaleY(1); transform-origin: top center;}
  51% { transform: scaleY(1); transform-origin: bottom center;}
  100% { transform: scaleY(0); transform-origin: bottom center;}
}
@keyframes scroll_top {
  0% { transform: scaleY(0); transform-origin: top center;}
  50% { transform: scaleY(1); transform-origin: top center;}
  51% { transform: scaleY(1); transform-origin: bottom center;}
  100% { transform: scaleY(0); transform-origin: bottom center;}
}

@media screen and (max-width: 600px) {
  #main_tit { height: auto;}
  #main_tit .slide_fade { height: calc(100vh - 55px);}
  #main_tit h1 span { font-size: 18px;}

  #svg_tit { width: 92%; height: auto;}

  #news_col { position: static; width: 100%; min-width: 0; flex-wrap: wrap;}
  #news_col p.en_font { width: 70%; text-align: left; border-right: 1px solid #ccc; font-size: 20px; padding: 4px 0 4px 3%; box-sizing: border-box;}
  #news_col #feed { width: calc(100% - 100px); width: 70%; padding: 0 0 8px 3%; order: 1; border-right: 1px solid #ccc;}
  #news_col #feed a span { display: block; margin-bottom: 5px;}
  #news_col .page { order: 1; width: 100px; width: 30%;}
  #news_col .page span { padding: 0 5px;}
  #news_col .news_arrow .slick-prev { left: 5px;}
  #news_col .news_arrow .slick-next { right: 5px;}
  #news_col .news_arrow .slick-prev:hover { left: 5px;}
  #news_col .news_arrow .slick-next:hover { right: 5px;}

  #news_col > a { width: 30%;}
}



/* ---------------------------------------------------
#lead
------------------------------------------------------ */
#lead { background: #ffae00; color: #fff; text-align: center; font-weight: bold; padding: 80px 0; position: relative;}
#lead .inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;}
#lead .tit_border::before { background: #fff;}
#lead h2,
#lead dl,
#lead a.btn { background: #ffae00;}
#lead dl { margin-top: 50px;}
#lead dt { font-size: 25px; margin-bottom: 50px;}
#lead a.btn { display: block; width: 400px; border: 1px solid #fff; color: #fff; padding: 10px 0; margin: 50px auto 0;}
#lead a.btn:hover { background: #fff; color: #ffae00;}

#lead #particle_col .particles { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#lead #particle_col .pg-canvas { width: 100%; height: 100%;}

@media screen and (max-width: 600px) {
  #lead { padding: 10vw 0;}
  #lead dl { margin-top: 20px; text-align: left;}
  #lead dt { font-size: 18px; margin-bottom: 20px;}
  #lead a.btn { width: 80%; margin: 20px auto 0;}

  #lead #particle_col .particles { display: none;}
}

/* App Bnr */
main > .bnr { padding: 90px 3% 0; text-align: center; }
main > .bnr a { display: inline-block; }
main > .bnr li { margin-bottom:20px; }
main > .bnr li:last-of-type { margin-bottom: 0;}

@media screen and (max-width: 600px) {
	main > .bnr { padding: 50px 3% 0; text-align: center; }
	main > .bnr li { margin-bottom:10px; }
}


/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 { padding: 80px 0 0;}
#sec1 h2 + p { margin-top: 20px; text-align: center;}

#sec1 section { padding: 50px 0 80px; position: relative;}
#sec1 section::before { content: ''; display: block; width: 100%; height: 1px; background: #bbbbbb; position: absolute; top: 80px; right: 0;}
#sec1 h3 { display: inline-block; background: #fff; padding-right: 15px; position: relative; z-index: 1;}
#sec1 h3 span { font-size: 60px; color: #ffae00; font-weight: 800; display: block; line-height: 1; margin-bottom: 10px;}

#sec1 .box_wrap { display: flex; flex-wrap: wrap; justify-content: space-between;}
#sec1 .box_wrap .txt_box { width: 430px;}
#sec1 .box_wrap .txt_box ul { display: flex; flex-wrap: wrap; padding: 50px 0 40px; line-height: 1.4;}
#sec1 .box_wrap .txt_box li { width: 120px; margin-right: 35px; padding-bottom: 10px; text-align: center;}
#sec1 .box_wrap .txt_box li:nth-of-type(3n) { margin-right: 0;}
#sec1 .box_wrap .txt_box li p { position: relative; margin-top: 5px;}
#sec1 .box_wrap .txt_box li p::before{
  content: ''; display: block; width: 100%; height: 1px; position: absolute; top: 50%; left: 0;
  background: linear-gradient(to right, rgba(255,0,0,0), #bcbcbc 7%, #bcbcbc 93%, rgba(255,0,0,0));
}
#sec1 .box_wrap .txt_box li p span { display: inline-block; background: #fff; padding: 0 5px; position: relative; z-index: 1; font-size: 13px;}
#sec1 .box_wrap .txt_box > a.btn { display: block; width: 70%; background: #1a1312; border: 1px solid #1a1312; color: #fff; text-align: center; padding: 15px 0; margin-top: 50px;}
#sec1 .box_wrap .txt_box > a.btn:hover { background: #fff; color: #1a1312;}
#sec1 .box_wrap .photo { width: calc(100% - 500px); text-align: right;}
#sec1 .box_wrap .photo img { width: 100%; height: 100%;}

#sec1 #sec1_1 .photo { position: relative;}
#sec1 #sec1_1 .photo img { width: auto; height: auto;}
#sec1 #sec1_1 .photo .pc_head { position: absolute; width: 92%; top: 25px; left: 50%; transform: translateX(-50%); z-index: 1;}
#sec1 #sec1_1 .photo .pc_window { position: relative; max-width: 640px; width: 100%; margin: 0 auto;}
#sec1 #sec1_1 .photo .slider_pc { position: absolute; top: 25px; left: 50%; width: 92%; transform: translateX(-50%); z-index: 1;}
#sec1 #sec1_1 .photo .slider_pc img { width: 100%;}
#sec1 #sec1_1 .photo .slider_pc .slick-arrow { width: 50px; height: 72px; z-index: 1; top: 45%;}
#sec1 #sec1_1 .photo .slider_pc .slick-prev { background: url(../../img/slide_arrow1.png)no-repeat center; left: -1px;}
#sec1 #sec1_1 .photo .slider_pc .slick-next { background: url(../../img/slide_arrow2.png)no-repeat center; right: -1px;}
#sec1 #sec1_1 .photo .slider_pc .slick-prev:before,
#sec1 #sec1_1 .photo .slider_pc .slick-next:before { content: none;}
#sec1 #sec1_1 .photo .slider_pc .slick-dots { z-index: 1; bottom: -9px;}
#sec1 #sec1_1 .photo .slider_pc .slick-dots li { margin: 0; height: 15px;}
#sec1 #sec1_1 .photo .slider_pc .slick-dots li button:before { color: #757575; opacity: 1; font-size: 11px;}
#sec1 #sec1_1 .photo .slider_pc .slick-dots li.slick-active button:before { color: #f0851d;}
#sec1 #sec1_1 .photo .sp_window { position: absolute; bottom: 0; right: 0; z-index: 1;}
#sec1 #sec1_1 .photo .slider_sp { position: absolute; width: 90%; top: 35px; left: 50%; transform: translateX(-50%); z-index: 1;}
#sec1 #sec1_1 .photo .cap {
  display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; left: 30px;
  background: rgba(255, 174, 0, 0.9); width: 210px; height: 210px; padding: 10px; box-sizing: border-box;
  border-radius: 50%; color: #fff; text-align: center; font-size: 22px; line-height: 1.1; z-index: 1;
}
#sec1 #sec1_1 .photo .cap.show { -webkit-animation: bound 1.5s forwards; animation: bound 1.5s forwards;}
@-webkit-keyframes bound {
  50% { transform: translateY(-50px); animation-timing-function:; animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);}
  60% { transform: translateY(0); cubic-bezier(0.215, 0.61, 0.355, 1)}
  90% { transform: translateY(-25px); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);}
  100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
}
@keyframes bound {
  50% { transform: translateY(-50px); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);}
  60% { transform: translateY(0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
  90% { transform: translateY(-25px); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);}
  100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
}
#sec1 #sec1_1 .photo .cap span { display: block; font-size: 18px; margin-bottom: 10px;}
#sec1 #sec1_1 .photo .cap em { font-size: 40px; font-weight: bold; font-style: normal;}
#sec1 #sec1_1 .photo .cap small { display: block; font-size: 60%; margin-top: 5px;}

#sec1 #sec1_3 { background: linear-gradient(to bottom,#fff 175px,#ffae00 175px);}
#sec1 #sec1_3::before { content: none;}
#sec1 #sec1_3 h3 { margin-bottom: 30px;}
#sec1 #sec1_3 .box_wrap { position: relative;}
#sec1 #sec1_3 .box_wrap::before { content: ''; display: block; width: 100%; height: 1px; background: #bbbbbb; position: absolute; top: 30px; right: 0;}
#sec1 #sec1_3 .box_wrap .txt_box dl { padding: 80px 0 0; color: #fff;}
#sec1 #sec1_3 .box_wrap .txt_box dt { font-size: 25px; margin-bottom: 15px;}
#sec1 #sec1_3 .box_wrap .txt_box > a.btn { background: none; border: 1px solid #fff;}
#sec1 #sec1_3 .box_wrap .txt_box > a.btn:hover { background: #fff; color: #ffae00;}
#sec1 #sec1_3 .photo { position: relative; z-index: 1;}

@media screen and (max-width: 600px) {
  #sec1 { padding: 10vw 0 0;}
  #sec1 h2 + p { text-align: left; padding: 0 4%;}
  #sec1 section { padding: 8vw 0 5vw;}
  #sec1 section::before { top: 58px;}
  #sec1 h3 span { font-size: 30px; margin-bottom: 0;}
  #sec1 .box_wrap .txt_box { width: 100%; order: 1;}
  #sec1 .box_wrap .txt_box ul { padding: 5vw 0 15px;}
  #sec1 .box_wrap .txt_box li { width: 30%; margin-right: 12px; flex-grow: 1;}
  #sec1 .box_wrap .txt_box li img { width: 100%;}
  #sec1 .box_wrap .photo { width: 100%; margin-top: 15px;}
  #sec1 .box_wrap .txt_box > a.btn { margin: 25px auto 0; padding: 10px 0;}

  #sec1 #sec1_1 .photo { margin-bottom: 15px;}
  #sec1 #sec1_1 .photo .slider_pc { height: 56vw;}
  #sec1 #sec1_1 .photo .slider_pc .slick-list { height: 100%;}
  #sec1 #sec1_1 .photo .slider_pc img { height: 100%;}
  #sec1 #sec1_1 .photo .slider_pc .slick-dots { bottom: -26vw;}
  #sec1 #sec1_1 .photo .sp_window { width: 24vw;}
  #sec1 #sec1_1 .photo .slider_pc .slick-arrow { width: 30px; height: 43px; background-size: 100%;}
  #sec1 #sec1_1 .photo .slider_sp { top: 4vw;}
  #sec1 #sec1_1 .photo .cap { font-size: 15px; width: 150px; height: 150px; padding: 5px; left: 0;}
  #sec1 #sec1_1 .photo .cap span { margin-bottom: 0;}
  #sec1 #sec1_1 .photo .cap em { font-size: 24px;}
  #sec1 #sec1_1 .photo .cap small { font-size: 80%;}

  #sec1 #sec1_3 { background: linear-gradient(to bottom,#fff calc(50vw + 80px),#ffae00 calc(50vw + 80px)); padding: 8vw 0 10vw;}
  #sec1 #sec1_3 .photo { position: static; margin-top: 80px;}
  #sec1 #sec1_3 h3 { position: absolute; top: 0;}
  #sec1 #sec1_3 .box_wrap .txt_box dl { padding: 5vw 0 0;}
}


/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2 { padding: 100px 0;}
#sec2 .tit_border { color: #fff; font-size: 30px; text-align: left;}
#sec2 li:not(:first-of-type) .tit_border::before { left: 0;}
#sec2 ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
#sec2 li { width: calc(50% - 5px); height: 430px; position: relative; overflow: hidden; background: #000;}
#sec2 li a { display: block; width: 100%; height: 100%; padding: 80px 60px; box-sizing: border-box; position: relative; z-index: 1;}
#sec2 li:first-of-type { width: 100%; margin-bottom: 10px;}
#sec2 li:first-of-type .tit_border { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
#sec2 li img { width: 100%; height: 430px; position: absolute; top: 0; left: 0; z-index: -1; transition: transform 1s, opacity 1s; opacity: 0.7;}
#sec2 li .btn { width: 190px; padding: 10px 0; position: absolute; bottom: 0; right: 0; background: #fff; text-align: center; text-decoration: underline;}
#sec2 li a:hover img { opacity: 1; transform: scale(1.06);}
#sec2 li a:hover .btn { background: #000; color: #fff;}

@media screen and (max-width: 600px) {
  #sec2 { padding: 10vw 0;}
  #sec2 .tit_border { font-size: 22px;}
  #sec2 li:first-of-type .tit_border { position: relative;; transform: none; text-align: left; top: 0; left: 0;}
  #sec2 li:first-of-type .tit_border::before { left: 0;}
  .tit_border span { font-size: 14px;}
  #sec2 li { width: 100%; height: 55vw; margin-bottom: 10px;}
  #sec2 li a { padding: 20px 4%;}
  #sec2 li img { opacity: 1; height: 100%;}
  #sec2 li .btn { width: 120px; padding: 5px 0;}
}




/* ---------------------------------------------------
#sec3
------------------------------------------------------ */
#sec3 { background: #f8f6f4; padding: 85px 0;}
#sec3 .inner { display: flex; flex-wrap: wrap; justify-content: space-between;}
#sec3 .inner > p { width: 40%; font-size: 19px;}
#sec3 .inner ul { width: 60%; display: flex; justify-content: flex-end; }
#sec3 .inner li { margin-right: 20px;}
#sec3 .inner li a { display: block; margin: 0 auto; max-width: 304px; background: #fff; }
#sec3 .inner li:last-of-type { margin-right: 0;}
@media screen and (max-width: 600px) {
  #sec3 { padding: 10vw 0;}
  #sec3 .inner > p { width: 100%; font-size: 16px; text-align: center;}
  #sec3 .inner ul { width: 80%; display: block; margin: 20px auto;}
  #sec3 .inner li { margin-right: 0; margin-bottom: 10px; background: none; text-align: center;}
}



/* ---------------------------------------------------

------------------------------------------------------ */

@media screen and (max-width: 600px) {
}