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

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

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

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

input, select { vertical-align: middle; }

body { min-width: 1000px; font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; font-size: 16px; line-height: 1.2; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
@media only screen and (max-width: 640px) { body { min-width: auto; } }

ul { list-style: none; }

img { width: auto; max-width: 100%; vertical-align: bottom; }

.ib { display: inline-block; }

a { color: #ed6d00; text-decoration: none; outline: none; -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: opacity 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); }
a:hover { opacity: 0.5; }

.arrow-circ-black, .arrow-circ-orange, .arrow-circ-white, .arrow-circ-white-purple, .arrow-circ-white-yellow, .arrow-circ-white-yellow-down, .arrow-circ-white-orange-down { font-size: 14px; }
.arrow-circ-black *, .arrow-circ-orange *, .arrow-circ-white *, .arrow-circ-white-purple *, .arrow-circ-white-yellow *, .arrow-circ-white-yellow-down *, .arrow-circ-white-orange-down * { vertical-align: middle; }
.arrow-circ-black:before, .arrow-circ-orange:before, .arrow-circ-white:before, .arrow-circ-white-purple:before, .arrow-circ-white-yellow:before, .arrow-circ-white-yellow-down:before, .arrow-circ-white-orange-down:before { content: ""; display: inline-block; width: 14px; padding-top: 14px; margin-right: 5px; background-repeat: no-repeat; background-position: left center; background-size: contain; text-decoration: none; vertical-align: middle; }

.arrow-circ-black:before { background-image: url(../images/common/arrow_circ_black.svg); }

.arrow-circ-orange:before { background-image: url(../images/common/arrow_circ_orange.svg); }

.arrow-circ-white:before { background-image: url(../images/common/arrow_circ_white.svg); }

.arrow-circ-white-purple:before { background-image: url(../images/common/arrow_circ_white_purple.svg); }

.arrow-circ-white-yellow:before { background-image: url(../images/common/arrow_circ_white_yellow.svg); }

.arrow-circ-white-yellow-down:before { background-image: url(../images/common/arrow_circ_white_yellow_down.svg); }

.arrow-circ-white-orange-down:before { background-image: url(../images/common/arrow_circ_white_orange_down.svg); }

.btn, .btn-yellow { display: inline-block; padding: 0.83333em 1.11111em; background: #ed6d00; font-size: 1.125em; font-weight: 600; color: white; }

.btn-yellow { background: #fabe00; }

#pagetop { position: absolute; left: 0; top: 0; }

.anchor { position: absolute; left: 0; top: -64px; }
@media only screen and (max-width: 640px) { .anchor { top: -14.0625vw; } }

.disable { opacity: 0.1; cursor: default; }

#header { position: absolute; width: 100%; left: 0; top: 0; z-index: 1; }
#header > .inner { position: relative; width: 980px; margin: auto; padding: 0 10px; overflow: visible; }
#header .header-top { margin-top: 14px; overflow: hidden; }
#header .header-top ul { height: 18px; line-height: 18px; float: right; overflow: hidden; }
#header .header-top li { float: left; }
#header .header-top li + li { margin-left: 12px; }
#header .header-top .en { margin-left: 31px; }
#header .header-top .en img { width: 48px; height: auto; }
#header .header-top .cn { margin-left: 16px; }
#header .header-top .cn img { width: 27px; height: auto; }
#header .navigation { height: 17px; line-height: 17px; margin-top: 16px; }
#header .navigation ul { width: 100%; border-right: 2px solid #fabe00; border-left: 2px solid #fabe00; overflow: hidden; }
#header .navigation li { width: 138px; height: 17px; float: left; }
#header .navigation li + li { border-left: 2px solid #fabe00; }
#header .header-title { margin-top: 18px; overflow: hidden; }
#header .header-title .logo { position: relative; width: 86px; float: left; }
#header .header-title .logo img { max-width: 86px; width: 100%; height: auto; }
#header .header-title .title { width: 869px; margin-top: 5px; float: right; }
#header .header-title .tgs { pointer-events: stroke; display: block; width: 100%; padding-top: 5.75374%; background: url(../images/common/header_title@2x.png) no-repeat; background-size: contain; }
#header .header-title .tgs span { position: absolute; left: 0; top: 0; text-indent: -9999px; overflow: hidden; }
#header .header-title dl { margin-top: 13px; margin-left: 65px; overflow: hidden; }
#header .header-title dd { float: left; }
#header .header-title dd + dd { margin-left: 22px; }
#header .header-title a, #header .header-title img { display: block; }
@media only screen and (max-width: 640px) { #header > .inner { width: auto; /*padding:0 10/640*100%;*/ }
  #header .header-top { display: none; }
  #header .navigation { display: none; }
  #header .header-title { margin-top: 3.16667%; overflow: hidden; }
  #header .header-title .logo { width: 13.33333%; margin-left: 2%; margin-top: 1.66667%; }
  #header .header-title .title { position: relative; width: 84.66667%; margin-top: 0; }
  #header .header-title .tgs { width: 74.80315%; margin-left: 5.31496%; padding-top: 29.33071%; background-image: url(../images/common/sp_header_title@2x.png); }
  #header .header-title dl { margin-top: 2.75591%; margin-left: -18.11024%; }
  #header .header-title dd + dd { margin-left: 0; }
  #header .header-title dd:nth-child(1) { width: 43.5%; }
  #header .header-title dd:nth-child(2) { width: 44.66667%; margin-left: 2.83333%; }
  #header .header-title dd:nth-child(3) { width: 32.67717%; position: absolute; left: 0; top: 0; margin-top: 25.19685%; margin-left: 47.04724%; } }

.csspositionsticky #header-fix { position: -webkit-sticky; position: sticky; -webkit-transform: translateY(-64px); transform: translateY(-64px); }

.csspositionsticky body.fix #header-fix { -webkit-transform: translateY(0); transform: translateY(0); }

body.fix #header-fix { -webkit-transform: translateY(64px); transform: translateY(64px); }

#header-fix { position: fixed; left: 0; top: 0; margin-top: -64px; width: 100%; height: 64px; background: white; z-index: 2; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: -webkit-transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000), -webkit-transform 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
#header-fix > .inner { position: relative; width: 980px; margin: auto; padding: 0 10px; overflow: hidden; }
#header-fix .logo { position: relative; width: 43px; height: auto; margin-top: 9px; float: left; }
#header-fix .logo img { width: 100%; height: auto; }
#header-fix .tgs { position: relative; display: block; width: 122px; height: 47px; margin-top: 9px; margin-left: 12px; background: url(../images/common/sp_header_title@2x.png) no-repeat; background-size: contain; float: left; }
#header-fix .tgs span { position: absolute; left: 0; top: 0; text-indent: -9999px; overflow: hidden; }
#header-fix .header-top { height: 16px; line-height: 0; margin-top: 9px; overflow: hidden; }
#header-fix .header-top ul { float: right; }
#header-fix .header-top li { float: left; }
#header-fix .header-top li + li { margin-left: 12px; }
#header-fix .header-top .t img, #header-fix .header-top .f img, #header-fix .header-top .l img { width: auto; height: 100%; }
#header-fix .header-top .t { height: 14px; margin-top: 2px; }
#header-fix .header-top .f { height: 15px; margin-top: 1px; }
#header-fix .header-top .l { height: 16px; }
#header-fix .header-top .arrow-circ-orange:before { width: 10px; height: 10px; }
#header-fix .header-top .en { margin-left: 24px; margin-top: -3px; }
#header-fix .header-top .en img { width: 41px; height: auto; }
#header-fix .header-top .cn { margin-left: 12px; margin-top: -3px; }
#header-fix .header-top .cn img { width: 23px; height: auto; }
#header-fix .navigation { width: 786px; margin-top: 10px; float: right; }
#header-fix .navigation ul { border-right: 2px solid #fabe00; border-left: 2px solid #fabe00; overflow: hidden; }
#header-fix .navigation li { float: left; }
#header-fix .navigation li + li { border-left: 2px solid #fabe00; }
#header-fix .navigation a, #header-fix .navigation span { display: block; }
#header-fix .navigation img { display: block; width: 110px; height: 14px; }

#header-sp { position: fixed; display: none; width: 100%; left: 0; top: 0; z-index: 100; }

@media only screen and (max-width: 640px) { #header { position: absolute; }
  #header-fix { display: none; }
  #header-sp { display: block; width: 100%; left: 0; top: 0; } }
#menu-btn-open img, #menu-btn-close img { -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: opacity 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); }
#menu-btn-open:hover img, #menu-btn-close:hover img { opacity: 0.5; }

#menu-btn-open { position: fixed; display: block; width: 14.0625%; top: 0; right: 0; background: #ed6d00; cursor: pointer; z-index: 1; }

#navigation-sp { position: fixed; display: block; width: 75%; height: 100%; top: 0; right: 0; background: #ed6d00; z-index: 2; -webkit-transform: translateX(100%); transform: translateX(100%); overflow: auto; -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: -webkit-transform 0.7s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 0.7s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 0.7s cubic-bezier(0.190, 1.000, 0.220, 1.000), -webkit-transform 0.7s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
#navigation-sp #menu-btn-close { position: absolute; display: block; width: 18.75%; top: 0; right: 0; background: white; cursor: pointer; }
#navigation-sp .wrap { max-width: 220px; margin: auto; margin-top: 18.75%; padding: 0 27.08333%; }
#navigation-sp .menu-main { border-bottom: solid 1px rgba(255, 255, 255, 0.5); }
#navigation-sp .menu-main li { border-top: solid 1px rgba(255, 255, 255, 0.5); }
#navigation-sp .menu-main a, #navigation-sp .menu-main span { display: block; padding: 9.09091% 4.54545%; /*padding:12/150*100% 0;*/ }
#navigation-sp .menu-main img { display: block; }
#navigation-sp .menu-sns { padding: 20.45455% 4.54545%; *zoom: 1; }
#navigation-sp .menu-sns:after { content: ""; display: table; clear: both; }
#navigation-sp .menu-sns li { width: 23%; float: left; }
#navigation-sp .menu-sns li + li { margin-left: 15.5%; }
#navigation-sp .menu-sns a, #navigation-sp .menu-sns img { display: block; }
#navigation-sp .menu-sub { padding: 0 4.54545%; padding-top: 11.81818%; border-top: solid 1px rgba(255, 255, 255, 0.5); *zoom: 1; font-size: 17px; }
#navigation-sp .menu-sub:after { content: ""; display: table; clear: both; }
#navigation-sp .menu-sub .en { float: left; }
#navigation-sp .menu-sub .cn { float: right; }
#navigation-sp .menu-sub .arrow-circ-white { font-size: 1em; }
#navigation-sp .menu-sub .arrow-circ-white:before { content: ""; display: inline-block; width: 0.82353em; padding-top: 0.82353em; margin-right: 0.41176em; }
#navigation-sp .menu-sub .en img { width: 3.88235em; }
#navigation-sp .menu-sub .cn img { width: 2.11765em; }
@media only screen and (max-width: 540px) { #navigation-sp .menu-sub { font-size: 3.14815vw; } }

.menu-open #navigation-sp { -webkit-transform: translateX(0%); transform: translateX(0%); }

#bottom-contents { padding-bottom: 10px; background: white; }
#bottom-contents .navigation { margin-top: -10px; }
#bottom-contents .navigation ul { overflow: hidden; padding: 5px; }
#bottom-contents .navigation li { width: 33.33333%; padding: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; }
#bottom-contents .navigation li a { display: block; padding: 20px 0; -webkit-box-sizing: border-box; box-sizing: border-box; background: #ed6d00; text-align: center; }
#bottom-contents .navigation li .family { background: #f8b41f; }
@media only screen and (max-width: 640px) { #bottom-contents .navigation li { width: 100%; float: none; }
  #bottom-contents .navigation li a { padding: 1.6129%; } }
#bottom-contents .share { width: 750px; margin: auto; margin-top: 40px; padding: 0 5px 10px; }
#bottom-contents .share ul { overflow: hidden; }
#bottom-contents .share li { width: 33.33333%; padding: 0 5px; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; }
#bottom-contents .share a { display: block; position: relative; padding-top: 20%; background-repeat: no-repeat; background-size: 100% auto; text-indent: -9999px; }
#bottom-contents .share a span { position: absolute; left: 0; top: 0; }
#bottom-contents .share li:nth-child(1) a { background-image: url(../images/common/share_twitter.svg); }
#bottom-contents .share li:nth-child(2) a { background-image: url(../images/common/share_facebook.svg); }
#bottom-contents .share li:nth-child(3) a { background-image: url(../images/common/share_line.svg); }
@media only screen and (max-width: 640px) { #bottom-contents .share { width: auto; margin-top: 6.25%; }
  #bottom-contents .share a { padding-top: 36.78756%; }
  #bottom-contents .share li:nth-child(1) a { background-image: url(../images/common/sp_share_twitter.svg); }
  #bottom-contents .share li:nth-child(2) a { background-image: url(../images/common/sp_share_facebook.svg); }
  #bottom-contents .share li:nth-child(3) a { background-image: url(../images/common/sp_share_line.svg); } }
#bottom-contents .others { margin-top: 40px; padding: 0 10px; }
#bottom-contents .others > .inner { padding: 30px 0; background: #f1f1f3; overflow: hidden; }
#bottom-contents .others .wrap { max-width: 980px; margin: auto; padding: 0 10px; overflow: hidden; }
#bottom-contents .others .links { float: left; }
#bottom-contents .others .links ul { overflow: hidden; text-align: center; }
#bottom-contents .others .links li { float: left; }
#bottom-contents .others .links li + li { margin-left: 10px; }
#bottom-contents .others .links .tgs2017 { height: auto; max-width: 212px; }
#bottom-contents .others .credit { margin-top: 18px; float: right; }
#bottom-contents .others .credit a { font-size: 15px; color: black; }
@media only screen and (max-width: 640px) { #bottom-contents .others { margin-top: 6.25%; }
  #bottom-contents .others .wrap { width: auto; }
  #bottom-contents .others .links { float: none; }
  #bottom-contents .others .links li { float: none; }
  #bottom-contents .others .links li + li { margin-left: 0; margin-top: 10px; }
  #bottom-contents .others .credit { float: none; text-align: center; } }

#footer { padding: 0 10px; background: black; }
#footer > .inner { width: 980px; height: 60px; margin: auto; }
#footer a { color: white; }
#footer ul { position: relative; top: 50%; margin-left: -18px; -webkit-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; }
#footer li { padding: 0 18px; margin: 5px 0; border-right: 1px solid #808080; font-size: 0.75em; float: left; }
#footer li:last-child { border-right: none; }
@media only screen and (max-width: 640px) { #footer > .inner { width: auto; height: 90px; }
  #footer ul { margin-right: 15.16129%; } }

#topagetop { position: fixed; width: 67px; height: 67px; right: 0; margin-right: 30px; bottom: 0; border-radius: 100%; cursor: pointer; background: #ed6d00; z-index: 99; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: -webkit-transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000), -webkit-transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
#topagetop img { -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: opacity 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); }
#topagetop:hover { opacity: 1; }
#topagetop:hover img { opacity: 0.5; }
#topagetop.active { -webkit-transform: translateY(-30px); transform: translateY(-30px); }
@media only screen and (max-width: 1000px) { #topagetop { left: 903px; right: auto; } }
@media only screen and (max-width: 640px) { #topagetop { width: 10%; height: auto; left: auto; right: 0; margin-right: 4.6875%; } }

#container { background: url(../images/common/bg.png) repeat-y center top; }

#contents { position: relative; padding-top: 175px; z-index: 0; }
@media only screen and (max-width: 640px) { #contents { padding-top: 32.03125%; } }

#main { padding: 0 10px; }
#main > .inner { max-width: 980px; margin: auto; margin-top: -40px; -webkit-box-sizing: border-box; box-sizing: border-box; background: white; }
@media only screen and (max-width: 640px) { #main > .inner { margin-top: 0; } }

#page-title { margin-top: 20px; height: 200px; color: white; text-align: center; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(../images/common/title_bg.jpg); }
#page-title h1 { position: relative; }
@media only screen and (max-width: 640px) { #page-title { height: auto; } }

.fs16 { font-size: 16px; }
@media only screen and (max-width: 640px) { .fs16 { font-size: 2.5vw; } }
@media only screen and (max-width: 480px) { .fs16 { font-size: 12px; } }

.fs13 { font-size: 13px; }
@media only screen and (max-width: 640px) { .fs13 { font-size: 2.03125vw; } }
@media only screen and (max-width: 492px) { .fs13 { font-size: 10px; } }

.fs12 { font-size: 12px; }
@media only screen and (max-width: 640px) { .fs12 { font-size: 1.875vw; } }
@media only screen and (max-width: 533px) { .fs12 { font-size: 10px; } }