/* reset ----------------------------------- */ 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, var, b, dl, dt, dd, ol, ul, li, i, 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-weight:400; background:transparent; font-style:normal; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; vertical-align:baseline; background:transparent; text-decoration: none; color: #171717; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #ddd; margin:1em 0; padding:0; } input, select { vertical-align:middle; } * { box-sizing: border-box; } img { vertical-align: bottom; } /* basic ----------------------------------- */ :root { --r_black: #212529; --r_blue: #0056b3; --r_blue2: #10a6d5; --r_gray: #e2e8eb; --r_gray2: #c8d3d9; --r_gray3: #f4f6f7; --r_graytx: #515f69; --r_graytx2: #5d7888; --r_graytx3: #a1b4bf; --r_graylin: #5d788833; --r_graylin2: #373d42; --r_red: #e04040; --r_sky: #e5edf9; --r_sky2: #f3f6fc; --r_sky3: #93bbe6; --r_cwhite: #f0f7f7; --r_green: #45c4bd; --r_white: #fdffff; --r_popi: poppins, sans-serif; --r_noto: 'noto-sans-cjk-jp', sans-serif; } body { color: var(--r_black); font-family: 'noto-sans-cjk-jp', poppins, sans-serif; font-size: 15px; line-height: 1.4; font-weight: 400; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; background-color: var(--r_white); } .sect_in { max-width: 1200px; width: 100%; margin: 0 auto; } main { overflow: hidden; } .flex { display: flex; } /* header ----------------------------------- */ #head25.header { position: fixed; top: 0; left: 0; width: 100%;background: transparent; height: 100px; z-index: 10000; transition: background 0.3s ease, height 0.3s ease; line-height: 1.4; font-size: 15px; } #head25.header.searching { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } #head25.header.is-fixed { position: fixed; background: #fff; height: 80px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); left: 0; top: 0; width: 100%; border-bottom: 1px solid #ddd; } #head25.header.is-fixed .logo { width: 170px; } #head25.header.is-fixed .nav_item > a {margin-top: 14px; } #head25 { .header_inner { display: flex; align-items: center; justify-content: space-between; max-width: 100%; height: 100%; margin: 0 auto; padding: 0 25px; } .logo { width: 195px; transition: all 0.3s ease; } .logo a { display: block; font-size: 1.4rem; text-decoration: none; color: var(--r_black); } .global_nav_sp { height: 100%; } .global_nav { height: 100%; display: flex; align-items: center; } .global_nav .nav_list { display: flex; list-style: none; margin: 0 25px 0 0; padding: 0; align-items: center; height: 100%; } .nav_item { margin-left: 7px; height: 100%; border-bottom: 4px transparent solid; transition: all 0.3s ease; } .nav_item a { text-decoration: none; color: var(--r_black); padding: 15px 10px; display: block; font-weight: 500; transition: all 0.3s ease; } .nav_item > a { margin-top: 24px; } .nav_item a.outlink { padding-right: 27px!important; background: url(/ja/images/common/outlink.png) right 7px center / 12px no-repeat; } .global_nav .line { width: 0.5px; height: 40px; background-color: #ddd; } .global_nav .utility_list { display: flex; list-style: none; align-items: center; height: 100%; transition: all 0.3s ease; } a .icon_mail { display: block; height: 20px; width: 20px; background: url(/ja/images/common/icon_cnct.png) center left / 20px no-repeat; } a .icon_lang { display: block; height: 20px; width: 50px; padding-left: 30px; background: url(/ja/images/common/icon_lang.png) center left / 20px no-repeat; } a .icon_search { display: block; height: 20px; width: 20px; background: url(/ja/images/common/icon_srch.png) center left / 20px no-repeat; } a .icon_close { display: block; height: 20px; width: 20px; background: url(/ja/images/common/icon_close_1.png) center left / 20px no-repeat; } .toggle_btn { display: none; } .for_drawer { display: none!important; } .for_pcfix { display: block!important; } } #overlay, #overlay_search { width: 100%; height: 100vh; position: fixed; left: 0; top: 70px; background: rgba(0, 0, 0, .4); z-index: 50; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease; } #overlay.open, #overlay_search.open { opacity: 1; visibility: visible; pointer-events: auto; } #head25 { /* Mega Menu */ .nav_item.has_mega .mega_menu { display: flex; opacity: 0; visibility: hidden; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% - 30px); width: 96vw; z-index: 1000; padding-top: 50px; pointer-events: none; transition: opacity 0.4s ease; } .has_mega .mega_menu .mega_base { border-radius: 16px; overflow: hidden; display: flex; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); width: 100%; } .nav_item.has_mega .mega_menu[style*="opacity: 1"] { pointer-events: auto; } /* Mega Menu layout */ .mega_left { width: 270px; padding: 30px; background: linear-gradient(180deg, #005BD7 0%, #0056B3 100%); color: #fff; } .mega_left h2 { font-size: 32px; line-height: 1.2; margin-bottom: 50px; font-family: var(--r_popi); } .mega_left h2 span { font-size: 14px; } .mega_left .btn_box { border-top: rgba(255,255,255,.2) 1px solid; padding-top: 25px; } .mega_left .btn_viewall { display: inline-block; padding: 10px 42px 10px 16px; background: url(/ja/images/common/arrow01.png) right 10px center / 20px no-repeat #fff; color: var(--r_black); text-decoration: none; border-radius: 20px; font-size: 0.9rem; } .mega_right { flex: 1; display: flex; flex-wrap: wrap; padding: 20px 30px 40px; background: #fff; justify-content: space-between; } .mega_right .mega_col { width: 23.5%; padding: 0; } .mega_right .mega_col h3 a, .mega_right .mega_col h3.nolink { font-size: 1rem; padding: 24px 0; font-weight: 700; } .mega_right .mega_col ul { list-style: none; margin: 0 0 20px; padding: 0; } .mega_right .mega_col li { margin-bottom: 5px; } .mega_right .mega_col li a { text-decoration: none; color: #333; font-size: 0.9rem; font-weight: 400; padding: 0; display: inline-block; } .afterline { border-bottom: 1px var(--r_gray) solid; } /* Utility Menu layout */ .nav_item.has_lang .lang_menu { display: block; position: absolute; top: calc(100% - 30px); right: 50px; z-index: 1001; padding-top: 50px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; pointer-events: none; } .nav_item.has_lang.open .lang_menu { opacity: 1; visibility: visible; pointer-events: auto; } .lang_base { padding: 15px 32px; border: 1px solid var(--r_gray); background-color: #fff; border-radius: 16px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .lang_base ul { display: flex; align-items: center; } .lang_menu li a { margin: 0; font-weight: 700; } .lang_menu li a.selected { color: var(--r_red); text-decoration: underline; } .lang_base ul li + li { display: flex; align-items: center; } .lang_base ul li + li::before { content: "/"; display: inline-block; margin: 0 25px; color: #5d7888; font-weight: 400; vertical-align: middle; } .nav_item.has_lang.open a .icon_lang { background: url(/ja/images/common/icon_lang_h.png) center left / 20px no-repeat; color: var(--r_red); } .has_search.open .search_menu { display: block; } .search_menu { display: none; position: absolute; top: calc(100% - 30px); right: 0; z-index: 90; width: 100%; padding-top: 50px; } .search_base { max-width: 1400px; margin: 0 auto; background: #fff; padding: 40px 20px; border-radius: 16px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .search_base .mars_box { max-width: 540px; width: 100%; margin: 0 auto; } .search_base form { display: flex; align-items: center; justify-content: center; } .search_base input[type="text"] { width: 440px; padding: 12px 20px; border: 1px solid #ccc; border-radius: 8px 0 0 8px!important; font-size: 16px; font-family: var(--r_noto); height: 40px; } .search_base input[type="text"]:focus { outline: none; box-shadow: 0 0 0 3px #bfd2e6; border: 1px #5fbceb solid; } .search_base button.mf-search-bar_button { background-color: var(--r_red); color: #fff; border: none; border-radius: 0 8px 8px 0; padding: 7px 22px 7px 18px; font-size: 16px; line-height: 26px; cursor: pointer; display: flex; align-items: center; height: 40px; width: 100px; } .mf-search-bar_button_icon { width: 26px; } .mf-search-bar_input_alt-btn_icon { width: 26px !important; } .mf-search-box { margin-bottom: 0; } .mf-search-box .mf-search-bar .mf-search-bar_input-buttons { padding: 0!important; } .has_search .icon_close { display: none; } .has_search.open .icon_search { display: none; } .has_search.open .icon_close { display: block; } } @media (hover: hover) and (pointer: fine) { #head25.header:hover { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } #head25.header:has(.nav_item.has_search.open) { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } #head25 { .nav_list .nav_item:hover { border-bottom: 4px var(--r_blue) solid; } .utility_list .nav_item:hover { border-bottom: 4px var(--r_red) solid; } .nav_item a:hover { color: var(--r_blue); } .mega_col a:hover { color: var(--r_blue); text-decoration: underline; } .mega_col ul li a:hover { color: var(--r_blue); } .lang_menu li a:hover { color: var(--r_red); text-decoration: underline; } a:hover .icon_mail { background: url(/ja/images/common/icon_cnct_h.png) center left / 20px no-repeat; } a:hover .icon_lang { background: url(/ja/images/common/icon_lang_h.png) center left / 20px no-repeat; color: var(--r_red); } a:hover .icon_search { background: url(/ja/images/common/icon_srch_h.png) center left / 20px no-repeat; } } } @media (max-width: 1250px) { #head25.header.searching { background-color: transparent; box-shadow: none; } #head25.header.open_sp { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } #head25.header.is-fixed .nav_item > a { margin-top: 0; } #head25.header { height: 70px; } #head25.header.is-fixed { height: 70px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } #head25.header.is-fixed .logo { width: 140px; } #head25.header.is-fixed .navbar_toggle { box-shadow: none; } body.no-scroll { overflow: hidden; height: 100%; } body.no-scroll #head25.header { position: fixed; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); left: 0; top: 0; width: 100%; border-bottom: 1px solid #ddd; } #head25 { .header_inner { padding: 0 15px; } .logo { width: 140px; } .toggle_btn { display: block; position: absolute; top: 12px; right: 12px; width: 50px; height: 50px; } .navbar_toggle { padding: 10px; width: 100%; height: 100%; background-color: #fff; border-radius: 10px; box-shadow: 0px 4px 10px 0px #00000014; } .navbar_toggle_icon { position: absolute; background-color: var(--r_blue); height: 1px; left: 10px; right: 10px; top: calc(50% - 1px); transition: ease .5s; border-radius: 2px; width: 30px; } .navbar_toggle_icon:first-child { transform: translateY(5px); } .navbar_toggle_icon:last-child { transform: translateY(-5px); } .navbar_toggle.open { box-shadow: none; } .navbar_toggle.open .navbar_toggle_icon:first-child { transform: rotate(45deg); } .navbar_toggle.open .navbar_toggle_icon:last-child { transform: rotate(-45deg); } .global_nav_sp { position: fixed; top: 70px; left: 0; width: 100%; height: calc(100vh - 70px); background: transparent; overflow-y: auto; transform: translateX(100vw); transition: transform .5s ease; } .global_nav_sp.open { transform: translateX(0); } .global_nav { position: static; width: 90%; margin: 20px auto; background: #fff; border-radius: 20px; flex-direction: column-reverse; border-radius: 20px; height: auto; overflow: hidden; } .global_nav .nav_list { width: 100%; margin-right: 0; flex-direction: column; margin-bottom: 20px; } .nav_list .nav_item { width: 100%; margin-left: 0; } .utility_list .nav_item { } .global_nav .line { display: none; } .nav_list .nav_item, .nav_list .nav_item:hover, .utility_list .nav_item, .utility_list .nav_item:hover { border-bottom: 0; } .nav_list .nav_item a { padding: 20px 25px; border-top: 1px var(--r_gray) solid; margin-top: 0; font-size: 16px;} .nav_list .nav_item:last-child a { border-bottom: 1px var(--r_gray) solid; } .nav_list .nav_item a.outlink { padding-right: 24px; background: url(/ja/images/common/outlink.png) right 20px center / 14px no-repeat; } .for_drawer { display: block!important; } .for_pcfix { display: none!important; } /* Mega Menu（SPでは非表示→アコーディオンで開く） */ .nav_item.has_mega { position: relative; } .nav_item.has_mega .mega_menu { position: static; display: none; opacity: 1; visibility: visible; padding-top: 0; width: 100%; box-shadow: none; transition: none; pointer-events: auto; transform: translateX(0); } .nav_item.has_mega .mega_base { display: block; border-radius: 0; box-shadow: none; background: #f8f8f8; padding: 0; } .nav_item.has_mega .mega_base .mega_left_link { width: 100%; padding: 15px 20px; color: #fff; background: url(/ja/images/common/arrow_sw.png) right 20px center / 14px no-repeat #005bd7; } .nav_item.has_mega .mega_base .mega_left_link .title { font-size: 20px; line-height: 1.2; color: #fff; font-family: var(--r_helv); letter-spacing: 0.05em; margin-bottom: 10px; } .nav_item.has_mega .mega_base .mega_left_link .title span { font-size: 12px; } .nav_item.has_mega a.m_ttl:before { content: ""; position: absolute; top: 30px; right: 20px; width: 14px; height: 1px; transform: rotate(90deg); background: var(--r_blue); transition: all .3s ease-in-out; } .nav_item.has_mega a.m_ttl:after {content: ""; position: absolute; top: 30px; right: 20px; width: 14px; height: 1px; background: var(--r_blue); transition: all .2s ease-in-out; } .nav_item.has_mega.open a.m_ttl:after { transform: rotate(180deg); } .nav_item.has_mega.open a.m_ttl:before { opacity: 0; } .nav_list .nav_item:not(.has_mega) > a:not(.outlink) { background: url(/ja/images/common/arrow_sb.png) right 20px center / 14px no-repeat #fff; } .mega_left .btn_box { padding-top: 10px; border-top: 0; } .mega_right { display: block; padding: 0 20px; } .mega_right .mega_col { width: 100%; } .mega_right .mega_col h3 a { padding: 15px 0; display: block; font-size: 0.95rem; border-top: 0; } .mega_right .mega_col li { margin-bottom: 0; } .mega_right .mega_col ul li a { font-size: 0.85rem; padding: 5px 0; display: block; border-top: 0; } .afterline.last { border-bottom: 0; } .global_nav .utility_list { align-items: flex-start; } .global_nav .utility_list { width: 90%; border: 1px var(--r_gray) solid; border-radius: 4px; margin: 20px auto; height: 48px; all .3s ease-in-out;} .utility_list .nav_item { width: 50%; margin-left: 0; height: 48px;} .utility_list .nav_item:last-child { } .utility_list .nav_item > a { margin-top: 0; padding: 14px; } a .icon_lang, a .icon_search { width: 100%; padding: 0; text-align: center; font-size: 16px; } .utility_list.open_lang { height: 100px; } .utility_list.open_search { height: 145px; } .nav_item.has_lang { position: relative; border-right: 1px #fff solid; border-bottom: 1px rgba(255,255,255,0); solid;} .nav_item.has_lang.notopen { border-right: 1px var(--r_gray) solid; border-bottom: 1px var(--r_gray) solid; } .nav_item.has_lang.open { border-right: 1px #fff solid; border-bottom: 1px rgba(255,255,255,0); solid;} .nav_item.has_lang.open .lang_menu { position: absolute; left: 0; right: auto; top: 100%; padding-top: 0; width: 200%;} .nav_item.has_lang.open .lang_base { padding: 0; border: 0; background-color: transparent; box-shadow: none; } .nav_item.has_lang.open .lang_base ul { justify-content: center; } .nav_item.has_search { position: relative; border-left: 1px var(--r_gray) solid; border-bottom: 1px rgba(255,255,255,0); solid;} .nav_item.has_search.notopen { border-bottom: 1px var(--r_gray) solid; } .nav_item.has_search.open { border-left: 1px rgba(255,255,255,0); solid; border-bottom: 1px rgba(255,255,255,0); solid; } .nav_item.has_search.open .search_menu { position: absolute; left: auto; right: 0; top: 100%; padding-top: 0; width: 200%;} .nav_item.has_search.open .search_base { background-color: transparent; box-shadow: none; padding: 8px;} .search_base input[type="text"] { width: 100%; padding: 11px 10px; border-radius: 5px 5px 0 0!important; font-size: 14px; border: 1px #c8d3d9 solid; } .search_base button { width: 100%; border-radius: 0 0 5px 5px; padding: 10px 24px; font-size: 14px; justify-content: center; } .search_base form { display: block; } .nav_item.has_search.open .icon_search { background: url(/ja/images/common/icon_srch_h.png) center left / 20px no-repeat; color: var(--r_red); } .has_search .icon_close, .has_search.open .icon_close { display: none; } .has_search.open .icon_search { display: block; } .mf-search-box .mf-search-bar { flex-direction: column; } .mf-search-box .mf-search-bar .mf-search-bar_input-wrapper { width: 100%; } .search_base button.mf-search-bar_button { width: 100%; border-radius: 0 0 5px 5px; } .mf-search-bar_doropdown-list { display: none; } } } /* -------------------------- footer -------------------------------- */ footer#foot25 { background-color: var(--r_black); margin-top: 100px; } #foot25 { #upfooter { width: 100%; padding: 60px 30px 40px; background-color: #fff; border-top: 1px var(--r_gray) solid; } #upfooter .privacy { max-width: 1200px; width: 100%; display: flex; gap: 20px; justify-content: space-between; margin: 0 auto; padding-bottom: 20px; border-bottom: 1px var(--r_graylin) solid; } #upfooter .privacy li { font-size: 10px; line-height: 1.7; list-style: none; } #upfooter .privacy li.iso { flex: 1;} #upfooter .privacy li.pmark {flex-shrink: 0; } #upfooter .privacy li.iso img { height: 90px; float: left; margin-right: 10px; } #upfooter .privacy li.pmark img { height: 90px; } #upfooter .service { max-width: 1200px; width: 100%; display: flex; justify-content: center; margin: 30px auto 0; gap: 20px; } #upfooter .service li { font-size: 12px; text-align: center; margin: 0 15px; width: 250px; list-style: none; } #upfooter .service li .bellbiz { width: 178px; } #upfooter .service li .kidzania { width: 141px; } #upfooter .service li img { display: block; margin: 0 auto 5px; } #upfooter .service li:first-child img { margin: 0 auto 20px; } #footer_nav { max-width: 1500px; width: 100%; margin: 60px auto 0 auto; padding: 0 30px 60px 30px; } #footer_nav h1 { width: 200px; margin-bottom: 40px; } #footer_nav a { color: var(--r_cwhite); transition: ease .3s;} #footer_link { display: flex; justify-content: space-between; margin-bottom: 30px; gap: 15px; } #footer_link > li { width: 25%; } #footer_link > li > ul > li a { display: block; margin-bottom: 32px; font-weight: 700; font-size: 16px; } #footer_link > li:first-child > ul > li:nth-child(4) { margin-bottom: 60px; } #footer_link li.out a:after { content: ""; padding-right: 24px; background: url(/ja/images/common/outlink_tb.png) right center / 14px 14px no-repeat; } #footer_link > li > ul > li > ul { margin: 20px 0 24px 24px; } #footer_link > li > ul > li > ul > li { margin-bottom: 24px; } #footer_link > li > ul > li > ul > li a { margin-bottom: 0; font-size: 15px; font-weight: 400; } #footer_link > li > ul > li > ul > li > ul { margin: 16px 0 20px 16px; } #footer_link > li > ul > li > ul > li > ul > li { margin-bottom: 16px; } #footer_link > li > ul > li > ul > li > ul > li a { margin-bottom: 0; font-size: 14px; font-weight: 400; } .copyright { font-size: 14px; font-weight: 700; color:#fff; } } @media (hover: hover) and (pointer: fine) { #foot25 #footer_nav a:hover { color: var(--r_blue2); } } @media (max-width: 767px) { #foot25 { #upfooter .privacy { flex-direction:column; align-items: center;} #upfooter .privacy li { line-height: 1.4; } #upfooter .privacy li.iso img { height: 50px; float: none; margin-right: 0; display: block; margin: 0 auto 10px; } #upfooter .privacy li.pmark img { height: 50px; } #upfooter .service { flex-direction:column; align-items: center;} #upfooter .service li:first-child img { margin: 0 auto 5px; } #upfooter .service li .bellbiz { width: 138px; } #upfooter .service li .kidzania { width: 123px; } #footer_nav { margin: 40px auto 0 auto; } #footer_nav h1 { width: 147px; } #footer_link { flex-direction: column; gap: 0; } #footer_link > li { width: 100%; } #footer_link > li > ul > li { position: relative; } #footer_link > li > ul > li a { display: block; padding: 16px 0; margin-bottom: 0; border-top: 1px var(--r_graylin2) solid; font-size: 14px; } #footer_link > li > ul > li > ul { display: none; font-size: 13px; margin: 0 0 0 24px;} #footer_link > li > ul > li > ul > li { margin-bottom: 0; position: relative; } #footer_link > li:first-child > ul > li:nth-child(4) { margin-bottom: 0; } #footer_link > li > ul > li > ul > li > ul { margin: 0 0 0 24px; } #footer_link > li > ul > li > ul > li > ul > li { margin-bottom: 0; } #footer_link > li > ul > li:has(> ul):before, #footer_link > li > ul > li > ul > li:has(> ul):before { content: ""; position: absolute; top: 26px; right: 20px; width: 14px; height: 1px; transform: rotate(90deg); background: var(--r_blue2); transition: all .3s ease-in-out; } #footer_link > li > ul > li:has(> ul):after, #footer_link > li > ul > li > ul > li:has(> ul):after { content: ""; position: absolute; top: 26px; right: 20px; width: 14px; height: 1px; background: var(--r_blue2); transition: all .3s ease-in-out; } #footer_link > li > ul > li.open:has(> ul):before, #footer_link > li > ul > li > ul > li.open:has(> ul):before { opacity: 0; } #footer_link > li > ul > li.open:has(> ul):after, #footer_link > li > ul > li > ul > li.open:has(> ul):after { transform: rotate(180deg); } } } /* frame ----------------------------------- */ #main25 { position: relative; width: 100%; margin-top: 79px; padding-bottom: 140px; .contents section { max-width: 1080px; width:100%; margin: 0 auto; } section.sec_ttl { max-width: 100%; background: url(../images/common/under_head_bg.jpg) center / cover no-repeat; height: 250px; padding: 55px 30px; } h1.btit { font-size: 72px; font-family: var(--r_popi); color: var(--r_blue); font-weight: 400; max-width: 1200px; margin: 0 auto; line-height: 1.5; } h1.btit .ja { font-size: 16px; font-weight: 700; line-height: 1; color: var(--r_black); font-family: var(--r_noto); display: block; } .contents { color: var(--r_black); text-align: center; font-size: 16px; font-weight: 400; overflow: hidden; padding: 0 30px; } .contents p { margin-bottom: 2rem; line-height: 2.0; } .bread { height: 48px; background: linear-gradient(192.79deg, #005bd7 0%, #0056b3 100%); margin-bottom: 100px; } .bread_in { width: 1260px; padding: 0 30px; margin: 0 auto; text-align: left; line-height: 48px; font-size: 12px; display: flex; color: var(--r_cwhite); } .bread_in li { list-style: none; padding: 0 10px; } .bread_in li a span { color: var(--r_sky3); text-decoration: underline; transition: all .3s ease; } .bread_in li a:hover span { color: var(--r_cwhite); } .bread_in li.home { padding: 0 10px 0 22px; background: url(../images/common/home.png) top 18px left / 16px no-repeat; } .bread_in li.middle { padding: 0 10px; } } @media screen and (max-width:1250px){ #main25 { margin-top: 69px; padding-bottom: 60px; } } @media screen and (max-width:767px) { #main25 { margin-top: 69px; .contents { font-size: 13px; } section.sec_ttl { max-width: 100%; background: url(/ja/images/common/under_head_bg_sp.jpg) center / cover no-repeat; height: auto; padding: 44px 30px;} h1.btit { font-size: 40px; } h1.btit .ja { font-size: 14px; } .bread { height: 34px; margin-bottom: 48px; } .bread_in { line-height: 34px; } .bread_in li.home { background: url(/ja/images/common/home.png) top 11px left / 16px no-repeat; } } } /* -------------------------- parts -------------------------------- */ *[class^="btn01"] { display: inline-block; padding: 16px 60px 16px 30px; background: url(/ja/images/common/arrow01.png) right 20px center / 24px no-repeat #fff; color: var(--r_black); text-decoration: none; border-radius: 40px; font-size: 1rem; box-shadow: 0px 4px 10px 0px #00000014; white-space: nowrap; font-weight: 700; line-height: 1.4; transition: all 0.3s ease; } .btn01_10c { width: 100%; text-align: center; } .btn01_lc { width: 100%; text-align: center; padding: 27px; font-size: 18px; } *[class^="btn01"].current { background: url(/ja/images/common/arrow01_h.png) right 20px center / 24px no-repeat var(--r_blue); color: #fff; } *[class^="btn01"].out { background: url(/ja/images/common/outlink2.png) right 20px center / 24px no-repeat #fff; } @media (hover: hover) and (pointer: fine) { *[class^="btn01"]:hover { background: url(/ja/images/common/arrow01_h.png) right 20px center / 24px no-repeat var(--r_blue); } *[class^="btn01"]:hover a, *[class^="btn01"]:hover { color: #fff; } *[class^="btn01"].out:hover { background: url(/ja/images/common/outlink2_h.png) right 20px center / 24px no-repeat var(--r_blue); color: #fff; } } @media (max-width: 960px) { *[class^="btn01"] { font-size: 14px; padding: 11px 50px 11px 24px; background: url(/ja/images/common/arrow01.png) right 16px center / 18px no-repeat #fff;} *[class^="btn01"].out { background: url(/ja/images/common/outlink2.png) right 16px center / 18px no-repeat #fff; } } a.pdf { position: relative; } a.pdf:after { content: ""; position: absolute; bottom: 0; right: -28px; display: block; width: 20px; height: 20px; background: url(/ja/images/common/pdf2.svg) right center / 20px 20px no-repeat; } a.arwlink { list-style: none; background: url(/ja/images/common/arrow_sb.png) center left / 12px no-repeat; padding-left: 20px; transition: all 0.3s ease; } a:hover.arwlink { background: url(/ja/images/common/arrow_sb.png) center left 3px / 12px no-repeat; } .graytx3 { color: var(--r_graytx3); } a.afterarw { list-style: none; background: url(/ja/images/common/arrow01.png) center right / 20px no-repeat; padding-right: 30px; transition: all 0.3s ease; } a.outarw { list-style: none; background: url(/ja/images/common/outlink2.png) center right / 20px no-repeat; padding-right: 30px; transition: all 0.3s ease; } /* -------------------------- old_header_style -------------------------------- */ /* section.g3はsection に置換　確認。 /* ------------------------------------------------------------------------------ */ section.gray_bg { width: 100%; max-width: none; background-color: #f7f7f7; padding: 80px 0; margin-bottom:80px; } section .gray_box { width: 100%; padding: 30px 40px; background-color: #f7f7f7; } section .gray_boxs { width: 100%; padding: 10px 15px; background-color: #f7f7f7; display: inline-block;} section .gray_box_r { width: 100%; padding: 30px 40px; background-color: #f7f7f7; border-radius: 20px; } section .gray_boxs_r { width: 100%; padding: 10px 15px; background-color: #f7f7f7; border-radius: 15px; } section .gray_bdr { width: 100%; padding: 30px 40px; border: 1px #ccc solid; border-radius: 20px; background-color: #fff; } section .gray_bdrs { width: 100%; padding: 10px 15px; border: 1px #ccc solid; border-radius: 15px; background-color: #fff; } section .gray_bdr_deco { width: 100%; background-image: url(/ja/images/common/bg001.png); padding: 8px; border-radius: 20px; background-color: #fff; } section .gray_bdr_deco div { background-color: #fff; padding: 30px 40px; border-radius: 12px; } section .gray_bdrs_deco { width: 100%; background-image: url(/ja/images/common/bg001.png); padding: 8px; border-radius: 20px; background-color: #fff; } section .gray_bdrs_deco div { background-color: #fff; padding: 10px 15px; border-radius: 12px; } [class^="gray_"] p:last-child, [class^="gray_"] ul, [class^="gray_"] ol { margin-bottom: 0; } @media screen and (max-width:768px) { section.gray_bg { padding: 40px 0; margin-bottom:40px; } section .gray_box, section .gray_box_r, section .gray_bdr, section .gray_bdr_deco div { padding: 20px; } .contents { margin-top: 50px; } } div[class^="acto-btn3"], div[class^="actr-btn3"], div[class^="act-btn3"], div[class^="actv-btn3"] { width: 31%; margin: 0 auto; } div[class^="acto-btn5"], div[class^="actr-btn5"], div[class^="act-btn5"], div[class^="actv-btn5"] { width: 50%; margin: 0 auto; } div[class^="acto-btn7"], div[class^="actr-btn7"], div[class^="act-btn7"], div[class^="actv-btn7"] { width: 75%; margin: 0 auto; } div[class^="acto-btn10"], div[class^="actr-btn10"], div[class^="act-btn10"], div[class^="actv-btn10"] { width: 100%; margin: 0 auto; } div[class^="acto-btn"] a, div[class^="actr-btn"] a, div[class^="act-btn"] a, div[class^="actv-btn"] a { position: relative; display: block; padding: 1em; margin: 1rem auto; background: #f7f7f7; border-radius: 20px; box-shadow: 1px 1px 1px 1px #efefef; line-height: 1.3rem; text-align: center; color: #444; font-size: 0.9375rem } div[class^="acto-btn"] a:hover, div[class^="actr-btn"] a:hover, div[class^="act-btn"] a:hover, div[class^="actv-btn"] a:hover { opacity: 0.7; } div[class^="acto-btn"] a .arw, div[class^="actr-btn"] a .arw, div[class^="act-btn"] a .arw, div[class^="actv-btn"] a .arw { position: absolute; left: 20px; top: 50%; margin-top: -3px; } .acto-btn3-h a,.acto-btn5-h a,.acto-btn7-h a,.acto-btn10-h a { background: url(/ja/images/index2/arw00.png) left 24px center / 10px no-repeat #ff8500!important; color: #fff!important; } .actr-btn3-h a,.actr-btn5-h a,.actr-btn7-h a,.actr-btn10-h a { background: url(/ja/images/index2/arw00.png) left 24px center / 10px no-repeat #f9452d!important; color: #fff!important; } .actv-btn3-h a,.actv-btn5-h a,.actv-btn7-h a,.actv-btn10-h a { background: url(/ja/images/index2/arw00.png) left 24px center / 10px no-repeat #7c61ff!important; color: #fff!important; } .act-btn3-h a,.act-btn5-h a,.act-btn7-h a,.act-btn10-h a { background: url(/ja/images/index2/arw00.png) left 24px center / 10px no-repeat #1bbcfe!important; color: #fff!important; } [class^="btn_idx"] { display: block; width: 100%; height: 115px; text-align: center; font-weight: 600; border-radius: 20px; display: flex; justify-content: center; align-items: center; box-shadow: 3px 3px 3px #f7f7f7; transition: all 0.3s ease; } .btn_idx { background: url(/en/images/index2/arw06.png) left 7% center / 3% #f0f0f0 no-repeat; } .btn_idxo { background: url(/en/images/index2/arw01.png) left 7% center / 3% #f0f0f0 no-repeat; } .btn_idxr { background: url(/en/images/index2/arw02.png) left 7% center / 3% #f0f0f0 no-repeat; } .btn_idxs { background: url(/ja/images/index2/arw03.png) left 7% center / 3% #f0f0f0 no-repeat; } .btn_idxv { background: url(/en/images/index2/arw04.png) left 7% center / 3% #f0f0f0 no-repeat; } .btn_idxg { background: url(/en/images/index2/arw07.png) left 7% center / 3% #f0f0f0 no-repeat; } [class^="btn_idx"]:hover { opacity: 0.7; transform: scale(1.02,1.02); } img { vertical-align: bottom; } figure { text-align: center; } figcaption { font-size: 12px; color: #777; line-height: 1.2; margin-top: 10px; } .pc-none { display: none } .sp-none { display: block } /*.art_list figure { aspect-ratio: 3/2; margin-bottom: 10px; }*/ .art_list figure { width: 100%; height: 227px; margin-bottom: 10px; filter: drop-shadow(2px 2px 3px rgb(180, 180, 180, 0.6)); } .art_list figure img { border-radius: 20px; transform:scale(1.0); transition:0.3s all; } .art_list h4 { margin-bottom: 1rem!important; font-weight: 700; line-height: 1.4; } a.art_list:hover figure img { transform:scale(1.05); transition:0.3s all; } a.art_list span { line-height: 1rem; padding: 0 5px !important; display: inline-block !important; color: #fff; font-size: 0.625rem; margin: 0 5px 12px 0; } a.art_list span:first-of-type { background-color: #f9452e; border: 0.5px #fff solid; } a.art_list span:last-of-type { background: #999; } .flex { display: flex; justify-content: space-between; flex-wrap: wrap; } .flex_nb { display: flex; justify-content: space-between; flex-wrap: nowrap; } .flex_flow { display: flex; justify-content: start; flex-wrap: wrap; } .flex_flow figure { display: inline-block; margin-right: 20px; margin-bottom: 30px; } .flex_flow figure:last-child { margin-right: 0; } .box2 { width: 48%; margin-bottom: 30px; } .box2nb { width: 48%; } .box3 { width: 31%; margin-bottom: 30px; } .box3nb { width: 31%; } .box4 { width: 23%; margin-bottom: 30px; } .box37_7 { width: 65%; margin-bottom: 30px; } .flex1 > * { flex: 1; } .gap0 { gap: 0px; } .gap5 { gap: 5px; } .gap15 { gap: 15px; } .gap30 { gap: 30px; } .com_flex { padding-bottom: 20px; } @media screen and (max-width: 768px) { .flex { flex-direction: column; } .box2, .box2nb, .box3, .box3nb, .box37_7 { width: 100%; } .flex_flow figure { margin-bottom: 20px; } } /* --------------------------------- title --------------------------------------- */ h1, h2, h3, h4, h5 { font-weight: 600; } [class^="lv1"] { font-size: 2rem; line-height: 1.6; margin-bottom: 36px; } [class^="lv2"] { font-size: 1.5rem; line-height: 1.5 ;margin: 16px 0 24px 0; } [class^="lv3"] { font-size: 1.25rem; line-height: 1.4; margin-bottom: 16px; } [class^="lv4"] { font-size: 1.125rem; line-height: 1.2; margin-bottom: 8px; } [class^="lv5"] { font-size: 1rem; line-height: 1.2; margin-bottom: 8px; } [class$="_vline"] { padding-left: 0.5em; border-left: 0.15em solid #aaa; text-align: left; } [class$="_uline"] { padding-bottom: 0.75em; border-bottom: 2px solid #aaa; text-align: left; margin-bottom: 1.5em } [class$="_mb0"] { margin-bottom: 0!important; } /* CSR螟画峩20250515 */ .ch_h3_ttl { display: flex; align-items: center; height: 70px; font-size: 1.2;} @media screen and (max-width: 768px) { [class^="lv1"] { font-size: 1.5rem; margin-bottom: 24px; } [class^="lv2"] { font-size: 1.25rem; margin: 14px 0 18px 0; } [class^="lv3"] { font-size: 1.125rem; margin-bottom: 12px; } [class^="lv4"] { font-size: 1rem; } } /* ------------------------------- small pic ------------------------------------- */ .img_r30 { float: right; max-width: 30%; margin: 0 0 20px 20px; } .img_l30 { float: left; max-width: 30%; margin: 0 20px 20px 0; } @media screen and (max-width: 768px) { .img_r30, .img_l30 { float: none; max-width: 100%; display: block; margin: 1.5rem auto; }} .clearfix:after { content: ""; display: block; clear: both; } /* ---------------------------------- list ---------------------------------------- */ section ul, section ol { margin-left: 20px; line-height: 2; margin-bottom: 24px; text-align: left; } section ul li { margin-bottom: 16px; list-style: disc; } section ul li::marker { color: var(--r_blue); font-weight: 700; } section ul li:last-child, #main25 ol li:last-child { margin-bottom: 0; } section ul li.non_mkr { list-style: none; } section ol li { margin-bottom: 16px; } section ul li ul, section ol li ol, section ol li ul, section ul li ol { margin: 16px 0 16px 20px; } section ul li ul li, section ol li ul li { list-style: circle;} section ul li ul li::marker, section ol li ul li::marker { color: var(--r_blue); font-weight: 700; } section ul li ul li > ul { margin-left: 16px; } section ul li ul li > ul li { list-style: none; } section ul li ul li > ul li:before { content: '・'; margin-left:-16px; } section ul li ol li { list-style: decimal; } section ul li p, section ol li p { padding-left: 24px; margin-top: 8px; } section ul li figure, section ol li figure { margin: 16px 0; text-align: left; } /* ------------------------------ notes ------------------------------------ */ section .notes { font-size: 11px!important; line-height: 1.2!important; color: #777; margin-top: 15px; letter-spacing: 0.05em; } section .notes ul { margin-left: 0;line-height: 1.2!important; } section .notes li { list-style: none; padding-left:1.5em; text-indent:-1.5em; margin-bottom: 0; } /* ------------------------------ combinator ------------------------------------ */ p + div.flex { margin-top: 40px; } div.flex + p { margin-top: 10px; } p + img, img + p, p + figure, figure + p, [class^="lv"] + figure, figure + [class^="lv"] { margin-top: 36px!important;} * + [class^="lv2"] { margin-top: 72px; } * + [class^="lv3"] { margin-top: 60px; } * + [class^="lv4"] { margin-top: 48px; } * + [class^="lv5"] { margin-top: 40px; } [class^="lv2"] + * { margin-top: 30px; } [class^="lv3"] + * { margin-top: 24px; } [class^="lv4"] + * { margin-top: 16px; } [class^="lv2"] + [class^="lv3"], [class^="lv2"] + [class^="lv4"], [class^="lv3"] + [class^="lv4"], [class^="lv4"] + [class^="lv4"], [class^="lv4"] + [class^="lv5"] { margin-top: 48px!important; } .ind30 > [class^="lv"] { margin-top: 24px; } /* --------------------------------- table --------------------------------------- */ .normal, .cross { border-collapse: collapse; font-size: 13px; margin: 16px 0 24px 0; width: 100%; } .normal.less, .cross.less { width: auto; } .normal th, .normal td, .cross th, .cross td { border: 0.5px #ccc solid; padding: 10px; line-height: 1.3 } .normal.num td, .cross.num td { text-align:right; } .normal th, .cross th { font-weight: 700; background-color: #e0e0e0; } .normal thead th, .cross thead th { text-align: center; } .normal.th20 th, .cross.th20 th { width: 20%; } .normal.th35 th, .cross.th35 th { width: 35%; } .normal.th50 th, .cross.th50 th { width: 50%; } .normal.th70 th, .cross.th70 th { width: 70%; } .normal caption { font-weight: 700; } .normal td ul, .cross td ul { line-height: 1.5; margin: 5px 0 5px 20px; } .normal td ul li, .cross td ul li { margin-bottom: 4px; } .normal caption, .cross caption { font-weight: 700; font-size: 16px; padding-bottom: 10px; text-align: left; } .normal caption span, .cross caption span{ font-weight: 700; font-size: 12px; color: #777; float: right; padding-top: 15px; line-height: 1; } .normal tfoot th, .cross tfoot th { font-weight: 700; background-color: #eee; } .normal tfoot td, .cross tfoot td { font-weight: 700; background-color: #f7f7f7; } td > p:last-child { margin-bottom: 0!important; } .va_t { vertical-align: top; } .va_b { vertical-align: bottom; } .lucid { border-collapse: collapse; border-spacing: 0; border: 0; } .lucid td, .lucid th { border: 0; padding: 0; line-height: 1.5 } @media screen and (max-width: 768px) { .normal th, .normal td { display: block; } .normal th, .normal.th20 th, .normal.th35 th, .normal.th50 th, .normal.th70 th { width: 100%; border-bottom: 0; border-top: 0; } .normal tr:first-child th { border-top:0.5px #ccc solid;} .w15_a, .w20_a, .w25_a, .w30_a, .w40_a, .w50_a { width: auto; } .lucid td:last-child { padding-left: 1rem } } @media screen and (max-width: 1200px) { .tbl_scroll { overflow-x: scroll; margin-bottom: 24px; } .tbl_scroll table { overflow-x: scroll; min-width: 900px; margin-top: 0; } } /* -------------------------- cookie -------------------------------- */ .cookie_panel { display: flex; justify-content: space-between; align-items: center; position: fixed; bottom: -350px; left: calc(50% - 90vw/2); width: 90%; font-size: 14px; background: #fff; padding: 20px 40px!important; ; border-radius: 10px!important; ; visibility: visible; box-sizing: border-box; transition: .5s; text-align: left; line-height: 1.7; z-index: 1000; box-shadow: 0px 4px 10px 0px #00000014; font-family: 'noto-sans-cjk-jp';} .cookie_panel.open { bottom: 20px; } .cookie_tx { width: 90%; } .cookie_panel .n_link2, .cookie_panel .n_link { color: var(--r_blue)!important; } .cookie_btn { color: #fff; background: var(--r_red)!important; ; padding: .5em 2.75em!important; ; } .cookie_btn:hover { cursor: pointer; background: #b9acff } .fadeout { animation: hide .3s linear 0s; animation-fill-mode: forwards; } @keyframes hide { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @media screen and (max-width: 768px) { .cookie_panel { flex-direction: column; width: 90%; left: calc(50% - 90vw/2); padding: 20px; } .cookie_panel.open { bottom: 15px; } .cookie_tx { width: 100%; margin-bottom: 1em; font-size: 12px; } .cookie_btn { margin: 0 auto 0 0; } } /* -------------------------- totop -------------------------------- */ #totop { position: fixed; right: 24px; bottom: -80px; transition: all 0.5s ease; z-index: 999; } #totop.show { bottom: 24px; } #totop img { width: 48px; cursor: pointer; filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.08)); transition: all 0.5s ease; } #totop img:hover { transform: scale(1.1); } @media screen and (max-width:767px) { #totop { right: 16px; } #totop.show { bottom: 16px; } } /* -------------------------- module -------------------------------- */ .for_pc { display:block!important; } .for_sp { display:none!important; } @media screen and (max-width:767px) { .for_sp { display:block!important; } .for_pc { display:none!important; } } .left { text-align: left!important; } .right { text-align: right!important; } .f_right { float: right; } .center { text-align: center!important; } .b_center { margin-right: auto; margin-left: auto; } .v_mid { display: flex; align-items: center; } .nowrap { white-space: nowrap!important; } /* hr { border-top: 1px solid #ccc; margin: 2rem 0; } */ sup { vertical-align: super; font-size: 10px; } .bg_wht { background-color: #fff; padding: 20px; } .n_link { color: var(--r_blue); } b, .b { font-weight: 700; } .red { color: #f9452d; } .ora { color: #ff8500; } .blu { color: #1bbcfe; } .vio { color: #7c61ff; } .gray { color: #999; } .fs12 { font-size: 12px; line-height: 20px; } .fs14 { font-size: 14px; line-height: 24px; } .fs18 { font-size: 18px; line-height: 32px; } .fs20 { font-size: 20px; line-height: 40px; } .fs24 { font-size: 24px; line-height: 48px; } .fs30 { font-size: 30px; line-height: 60px; } .lh1 { line-height: 1; } .lh15 { line-height: 1.5; } .ind30 { padding-left: 30px; } @media screen and (max-width:767px) { .ind30 { padding-left: 15px; } } .ind2nd { padding-left: 2em; text-indent: -1.5em; } .ml15 { margin-left: 15px; } @media screen and (max-width:767px) { .ml15 { margin-left: 0; } } .mv10 { margin-top: 10px; margin-bottom: 10px; } .mv20 { margin-top: 20px; margin-bottom: 20px; } .mv45 { margin-top: 45px; margin-bottom: 45px; } .mb0 { margin-bottom:0!important; } .mb5 { margin-bottom:5px!important; } .mb15 { margin-bottom:15px!important; } .mb30 { margin-bottom:30px!important; } .mb45 { margin-bottom:45px!important; }.mb60 { margin-bottom:60px!important; } .mb90 { margin-bottom:90px!important; } .mb120 { margin-bottom:120px!important; } .mt0 { margin-top:0!important; } .mt15 { margin-top:15px!important; } .mt30 { margin-top:30px!important; } .mt45 { margin-top:45px!important; } .mt60 { margin-top:60px!important; } .mt90 { margin-top:90px!important; } .mt120 { margin-top:120px!important; } .img_full { width: 100%; } .img_max { max-width: 100%; } .img_fit { width: 100%; height: 100%; object-fit: cover; } .img_rad { border-radius: 20px; } .w15_a { width: 15%; } .w20_a { width: 20%; } .w25_a { width: 25%; } .w30_a { width: 30%; } .w40_a { width: 40%; } .w50_a { width: 50%; } .w37_a { width: 37%; } .w35_a { width: 35%; } @media screen and (max-width: 767px) { .w15_a, .w20_a, .w25_a, .w30_a, .w40_a, .w50_a { width: auto; } } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w30 { width: 30%; } .w50 { width: 50%; } .w60 { width: 60%; } .w100 { width: 100%; } .w30_50 { width: 30%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 767px) { .w30_50 { width: 50%; } } .w30_100 { width: 30%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 767px) { .w30_100 { width: 100%; } } .w50_100 { width: 50%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 767px) { .w50_100 { width: 100%; } } .w65_100 { width: 65%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 767px) { .w65_100 { width: 100%; } } .w80_100 { width: 80%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 767px) { .w80_100 { width: 100%; } } .w90_100 { width: 90%; margin-left: auto; margin-right: auto; } @media screen and (max-width: 767px) { .w90_100 { width: 100%; } } .w85 { width: 85%; }