@charset "UTF-8";
@import url("https://use.fontawesome.com/releases/v5.11.2/css/all.css");
/**
* 1.0 - Normalize
* 2.0 - Common
* 3.0 - Header
* 4.0 - Contents
* 5.0 - Navi
* 6.0 - Main
* 7.0 - Footer
* 8.0 - Single Page
* 9.0 - Option
*/
/*----------------------------------------------------
1.0 - Normalize
----------------------------------------------------*/
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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table.table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: """";
}
a img {
border: 0;
}
figure {
margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
/*Border*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/*----------------------------------------------------
2.0 - Common
----------------------------------------------------*/
html {
background: #fff;
font-size: 62.5%; /* base-font-size:10px */
}
body {
font-family: "Roboto", "Noto Sans JP", sans-serif;
font-size: 1.6rem;
letter-spacing: 0;
position: relative;
background: rgb(21, 109, 157);
background: linear-gradient(90deg, rgb(13, 163, 186, 1) 0%, rgb(21, 109, 157, 1) 100%);
}
a {
color: #0d79b4;
}
a:hover {
color: #0da2ba;
text-decoration-color: transparent;
}
*tel-setting*/ a[href*="tel:"] {
pointer-events: none;
}
#wrapper {
position: relative;
width: 100%;
margin: 0 auto;
background-image: url(../images/index/index_bg_01.png);
background-size: 2000px 1280px;
background-position: center top;
}
/*----------------------------------------------------
3.0 - Header
----------------------------------------------------*/
header {
background: #fff;
position: relative;
position: fixed;
width: 100%;
height: 100px;
margin: 0 auto;
padding: 0;
text-align: center;
line-height: 0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
/* overflow: hidden; */ /* Safari NG */
z-index: 1;
}
@media (max-width: 999px) {
header {
background: #fff;
width: 100%;
height: 60px;
box-shadow: none;
z-index: 2;
}
}
header img {
width: 100%;
max-width: 600px;
height: auto;
}
.head_top {
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
header h1 {
padding: 10px 0;
}
@media (max-width: 999px) {
header h1 {
display: flex;
align-items: center;
height: 60px;
padding-left: 5px;
}
}
header h1 img {
width: 350px;
vertical-align: middle;
transition: 0.3s;
}
@media (max-width: 999px) {
header h1 img {
width: auto;
max-width: 100%;
height: 50px;
}
header h1 img[src*="_pc"] {
display: none;
}
}
.menu_lang {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 999px) {
.menu_lang {
width: 60px;
height: 60px;
margin-left: 5px;
margin-right: 60px;
}
.menu_lang span {
display: none;
}
}
.menu_lang > a {
width: 100%;
height: 100%;
background: #fff;
color: #2380b3;
border: 1px solid #2380b3;
border-radius: 20px;
line-height: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1.25em;
text-decoration: none;
transition: all 0.3s;
}
@media (max-width: 999px) {
.menu_lang > a {
border-radius: 0;
padding: 8px 0;
flex-direction: column;
}
}
.menu_lang > a:hover {
background: #2380b3;
color: #fff;
border: 1px solid #2380b3;
}
.menu_lang > a:before {
content: "";
width: 1.25em;
height: 1.25em;
display: inline-block;
background-color: #2380b3;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
mask-image: url('data:image/svg+xml;charset=UTF-8,');
mask-repeat: no-repeat;
mask-position: center;
margin-right: 0.5em;
}
@media (max-width: 999px) {
.menu_lang > a:before {
margin-right: 0;
}
}
.menu_lang > a:hover:before {
background-color: #fff;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
.head_btm {
width: 100%;
height: 60px;
background: rgba(255, 255, 255, 0.85);
transition: ease-in-out 0.3s;
}
@media (max-width: 999px) {
.head_btm {
height: 0;
}
}
.index .head_btm {
height: 0;
overflow: hidden;
}
/*----------------------------------------------------
4.0 - Contents
----------------------------------------------------*/
#contents {
width: 100%;
margin: 0 auto;
padding: 100px 0 0;
line-height: 0;
z-index: 0;
position: relative;
z-index: 0;
}
@media (max-width: 999px) {
#contents {
padding-top: 60px;
}
}
.inner {
width: 1000px;
margin: 0 auto;
text-align: left;
}
@media (max-width: 999px) {
.inner {
width: 92%;
}
}
.breadcrumbs {
width: 100%;
background-color: #fff;
color: #333;
line-height: 1;
padding: 1em 0 0;
}
.breadcrumbs > ul {
display: flex;
width: 92%;
max-width: 1000px;
margin: 0 auto;
}
.breadcrumbs > ul > li {
font-size: 1.4rem;
}
.breadcrumbs > ul > li::after {
content: ">";
margin: 0 0.5em;
}
.breadcrumbs > ul > li:last-of-type:after {
content: none;
display: none;
}
/*----------------------------------------------------
5.0 - Navi
----------------------------------------------------*/
/* Hamburger */
@media (min-width: 1000px) {
.hamburger {
display: none;
}
}
@media (max-width: 999px) {
.hamburger {
position: fixed;
display: flex;
justify-content: center;
background: rgb(21, 109, 157);
right: 0;
top: 0;
width: 60px;
height: 60px;
line-height: 1.75;
text-align: center;
cursor: pointer;
z-index: 1;
}
.hamburger span {
display: block;
position: absolute;
width: 28px;
height: 2px;
left: 16px;
background: #fff;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 10px;
}
.hamburger span:nth-child(2) {
top: 18px;
}
.hamburger span:nth-child(3) {
top: 26px;
}
.hamburger.active span:nth-child(1) {
top: 18px;
left: 15px;
background: #fff;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) {
top: 18px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.hamburger p {
position: absolute;
top: 32px;
color: #fff;
font-size: 1.2rem;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.hamburger.active p {
color: #fff;
}
}
/* Menu */
@media (min-width: 1000px) {
nav {
width: 100%;
height: 60px;
z-index: 1;
}
.dropmenu {
display: flex;
justify-content: space-between;
width: 1000px;
margin: 0 auto;
padding-top: 10px;
}
.dropmenu li {
height: 40px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
color: #000;
font-size: 1.5rem;
font-weight: 500;
line-height: 1;
transition: all 0.3s;
border-radius: 20px;
}
.dropmenu li a {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 2em;
color: #000;
text-decoration: none;
transition: all 0.3s;
border-radius: 20px;
}
.dropmenu li a:hover {
background-color: #177cb4;
color: #fff;
}
.dropmenu li.on a {
background-color: #177cb4;
color: #fff;
}
.dropmenu li ul {
position: absolute;
top: 100%;
left: 0;
width: auto; /* nowrap */
min-width: 100%; /* nowrap */
padding-top: 10px;
}
.dropmenu li ul li {
background: #eee;
height: 0;
font-size: 1.3rem;
overflow: hidden;
transition-duration: 0.3s;
border-radius: 0;
}
.dropmenu li ul li a {
border-radius: 0;
justify-content: flex-start;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.dropmenu li ul li.nowrap, .dropmenu li ul li ul li.nowrap {
white-space: nowrap;
}
.dropmenu li:hover > ul > li {
height: 40px;
overflow: visible;
}
.dropmenu li ul li ul {
top: 0;
left: 100%;
}
.dropmenu li:last-child ul li ul {
left: -100%;
width: 100%;
}
}
@media (max-width: 999px) {
nav {
background: none;
height: auto;
}
.dropmenu {
position: fixed;
display: none;
background-color: rgb(21, 109, 157, 0.95);
width: 100%;
height: 100vh;
color: #fff;
z-index: 200;
}
.dropmenu > li {
position: relative;
display: block;
text-align: left;
border-bottom: 1px solid #fff;
transition: 0.3s all;
}
.dropmenu > li > ul li {
border-top: 1px solid #fff;
}
.dropmenu > li a {
display: block;
padding: 1.5em 0 1.5em 1em;
color: #fff;
text-decoration: none;
transition: color 0.3s, text-decoration 0.3s;
}
.dropmenu > li > ul li a {
padding: 1.5em 0 1.5em 2em;
}
.dropmenu > li > ul li ul li a {
padding: 1.5em 0 1.5em 0.4em;
}
.dropmenu ul, .dropmenu ul ul {
display: none;
}
.dropmenu > li a:hover {
color: #ffc65c;
}
.dropmenu li.on:after {
display: none;
}
.dropmenu > li.off a:hover {
color: #fff;
cursor: default;
}
}
/* arrow */
@media (max-width: 999px) {
ul.dropmenu div.level01, ul.dropmenu div.level02 {
position: relative;
}
ul.dropmenu div.level01 a, ul.dropmenu div.level02 a {
display: flex;
align-items: center;
}
ul.dropmenu div.level01 a:after, ul.dropmenu div.level02 a:after {
content: "";
position: absolute;
right: 10px;
/* top: 1.5em; */
transition: all 0.2s ease-in-out;
/* display: block; */
width: 8px;
height: 8px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
ul.dropmenu div.level01 a:hover:after, ul.dropmenu div.level02 a:hover:after {
border-top: solid 2px #ffc65c;
border-right: solid 2px #ffc65c;
}
ul.dropmenu div.level01.open a:after, ul.dropmenu div.level02.openAcd a:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
/* top: 1.75em; */
}
}
/*----------------------------------------------------
6.0 - Main
----------------------------------------------------*/
#contents h1 {
position: relative;
background-image: url(../images/title_bg_01.jpg);
background-position: center bottom;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 240px;
margin: 0 auto;
padding-top: 40px;
color: #fff;
font-size: 2.875em;
font-weight: 500;
line-height: 1.1;
text-align: center;
text-shadow: 0 0 6px #000;
}
@media (max-width: 999px) {
#contents h1 {
height: 3.5em;
font-size: 2.5em;
padding: 0.25em 0.25em;
}
}
section {
padding: 4.5em 0 5em;
line-height: 1.75;
text-align: left;
background: #fff;
}
@media (max-width: 480px) {
section {
padding: 3em 0;
}
}
section:first-child {
padding-top: 0;
}
section h2 {
position: relative;
margin: 3em auto 1em;
padding-bottom: 0.75em;
font-size: 2em;
font-weight: 700;
line-height: 1.15;
color: #0d79b4;
text-align: center;
}
@media (max-width: 480px) {}
section h2:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 2em;
margin: 0 auto;
border-bottom: 4px #d1dce2 solid;
}
section h2:first-child {
margin-top: 0;
}
section h3 {
position: relative;
background: rgb(21, 109, 157);
background: linear-gradient(90deg, rgb(21, 109, 157, 1) 0%, rgb(13, 163, 186, 1) 100%);
margin: 2em auto 0.75em;
padding: 0.4em 0.3em 0.3em;
font-size: 1.5em;
font-weight: 700;
color: #fff;
line-height: 1.15;
}
section h3:first-child {
margin-top: 0;
}
@media (max-width: 480px) {
section h3 {}
}
section h2 + h3 {
margin-top: 0;
}
section h4 {
position: relative;
margin: 1.5em auto 0.75em;
padding-bottom: 0.1em;
font-size: 1.5em;
font-weight: 700;
color: #000;
line-height: 1.15;
border-bottom: 3px solid #000;
}
section h3 + h4 {
margin-top: 0;
}
section h5 {
position: relative;
margin: 1.5em auto 0.5em;
position: relative;
font-size: 1.25em;
font-weight: 700;
line-height: 1.15;
color: #000;
}
section h4 + h5 {
margin-top: 0;
}
section.banner {
background: #fff;
padding: 2em 0 1.25em;
border-top: 1px solid #ddd;
}
/*----------------------------------------------------
7.0 - Footer
----------------------------------------------------*/
footer {
position: relative;
/*background: rgb(21, 109, 157);
background: linear-gradient(90deg, rgb(13, 163, 186, 1) 0%, rgb(21, 109, 157, 1) 100%);*/
/*background: rgb(2, 127, 165);
background: linear-gradient(90deg, rgba(2, 127, 165, 1) 0%, rgba(13, 121, 180, 1) 100%);*/
/*background: rgb(21, 109, 157);
background: linear-gradient(90deg, rgba(10, 130, 152, 1) 0%, rgba(21, 109, 157, 1) 100%);*/
color: #fff;
width: 100%;
margin: 0 auto;
text-align: center;
z-index: 1;
}
@media (max-width: 999px) {}
@media (max-width: 768px) {}
footer .foot_inner {
width: 100%;
/*background-image: url(../images/index/index_bg_01.png);
background-size: 2000px 1280px;
background-position: center top;*/
margin: 0 auto;
padding: 60px 4% 40px;
}
@media (max-width: 999px) {
footer .foot_inner {
width: 92%;
}
}
footer .foot_logo {
max-width: 235px;
margin: 0 auto;
}
footer .foot_logo img {
width: 100%;
height: auto;
}
footer .foot_title {
font-family: "Roboto Condensed", "Noto Sans JP", sans-serif;
font-size: 1.75em;
font-weight: 700;
line-height: 1.2;
margin-top: 0.6em;
}
footer .foot_title.en_title {
font-size: 1.5em;
margin-top: 1em;
}
footer .foot_title > span {
font-size: 125%;
transform: translateY(0.05em);
display: inline-block;
}
footer .snsmenu {
display: flex;
justify-content: center;
margin-top: 0.5em;
}
footer .snsmenu > li {
width: 50px;
height: 50px;
margin: 1em 1em 0;
}
footer .snsmenu > li a:hover {
opacity: 0.7;
transition: 0.3s;
}
footer .copyright {
width: 100%;
text-align: center;
line-height: 1.5;
margin-top: 2em;
font-size: 0.85em;
}
footer a {
color: #000;
}
footer a:hover {
color: #577dd6;
}
footer a.tel {
color: inherit;
text-decoration: none;
}
/*----------------------------------------------------
8.0 - Single Page
----------------------------------------------------*/
/* Index
----------------------------------------------------*/
.index #contents {
padding: 0 0 0;
}
/* hero */
.index_main {
width: 100%;
margin: 0 auto;
line-height: 0;
text-align: center;
/*overflow: hidden;*/
z-index: 1;
position: relative;
}
@media (max-width: 999px) {
.index_main {
padding-top: 60px;
height: calc(76vw + 60px);
}
}
.index_main img {
width: 100%;
max-width: 100%;
height: auto;
}
.index_main > .mainimg {
min-height: 760px;
overflow: hidden;
padding-left: 50%;
}
@media (max-width: 999px) {
.index_main > .mainimg {
width: 100%;
height: 100%;
min-height: 0px;
}
}
.index_main > .mainimg img {
width: 2000px;
max-width: 2000px;
height: 760px;
transform: translateX(-50%);
}
@media (max-width: 999px) {
.index_main > .mainimg img {
width: 200vw;
height: 76vw;
}
}
.index_main > {}
.index_main > .indexdata {
width: 580px;
color: #fff;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3), 1px -1px 5px rgba(0, 0, 0, 0.3), -1px -1px 5px rgba(0, 0, 0, 0.3), -1px 1px 5px rgba(0, 0, 0, 0.3);
font-family: "Roboto Condensed", "Noto Sans JP", sans-serif;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-end;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 700;
line-height: 1.2;
}
@media (max-width: 768px) {
.index_main > .indexdata {
width: 84vw;
font-size: 2.125vw;
}
}
.index_main > .indexdata > .maintitle {
font-family: "Roboto Condensed", "Noto Sans JP", sans-serif;
font-size: 3.125em;
text-align: left;
display: flex;
align-items: center;
position: relative;
}
.index_main > .indexdata > .maintitle .main_g7 {
font-size: 3em;
font-weight: 400;
line-height: 0.7;
display: inline-block;
letter-spacing: -0.02em;
}
.index_main > .indexdata > .maintitle:after {
content: "G7 Kurashiki Labour and Employment Ministers' Meeting in Okayama";
position: absolute;
font-size: 36%;
width: 50%;
top: 0.4em;
right: 0;
}
.index_main > .indexdata > .maindate {
font-family: "Roboto Condensed", "Noto Sans JP", sans-serif;
font-size: 1.575em;
line-height: 1;
margin-top: 0.25em;
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.index_main > .indexdata > .maindate {
width: 64%;
font-size: 2em;
}
}
.index_main > .indexdata > .maindate span {
font-size: 1.25em;
display: inline-block;
transform: translateY(0.05em);
}
.index_main > .indexdata > .maindate .week {
font-size: 0.75em;
background: #fff;
color: #000;
display: inline-block;
text-shadow: none;
transform: translateY(-0.15em);
padding: 0.15em 0.2em 0.1em;
margin: 0 -0.25em;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
line-height: 1;
}
.index_main > .indexdata > .maindate .hidden {
display: none;
}
.index_main > .indexdata > .mainvenue {
font-family: "Roboto Condensed", "Noto Sans JP", sans-serif;
font-size: 1.575em;
line-height: 1;
margin-top: 0.25em;
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.index_main > .indexdata > .mainvenue {
width: 64%;
font-size: 2em;
}
}
.index_main > .indexdata > .mainflag {
width: 550px;
height: 40px;
margin-top: 1em;
}
@media (max-width: 768px) {
.index_main > .indexdata > .mainflag {
width: 92%;
height: auto;
}
}
.index_main > .indexdata.en_data {
width: 700px;
justify-content: center;
}
@media (max-width: 768px) {
.index_main > .indexdata.en_data {
width: 88vw;
font-size: 2vw;
}
}
.index_main > .indexdata.en_data > .maintitle {
font-size: 2.75em;
width: 15.5em;
line-height: 1.083;
letter-spacing: -0.03em;
}
@media (max-width: 768px) {
.index_main > .indexdata.en_data > .maintitle {
font-size: 2.6em;
}
}
.index_main > .indexdata.en_data > .maintitle .main_g7 {
font-size: 2.6em;
letter-spacing: -0.02em;
}
.index_main > .indexdata.en_data > .maintitle:after {
content: none;
}
@media (max-width: 768px) {
.index_main > .indexdata.en_data > .maintitle {
letter-spacing: 0;
width: auto;
}
}
.index_main > .indexdata.en_data > .maindate {
font-size: 2em;
margin-right: 0.5em;
}
@media (max-width: 768px) {
.index_main > .indexdata.en_data > .maindate {
font-size: 2.5em;
margin-right: 0;
}
}
.index_main > .indexdata.en_data > .maindate .week {
font-size: 0.6em;
background: #fff;
color: #000;
display: inline-block;
text-shadow: none;
transform: translateY(-0.25em);
padding: 0.15em 0.2em;
margin: 0 -0.25em;
}
.index_main > .indexdata.en_data > .mainvenue {
font-size: 2em;
margin-left: 0.5em;
}
@media (max-width: 768px) {
.index_main > .indexdata.en_data > .mainvenue {
font-size: 2.5em;
margin-left: 0;
}
}
.index_main > .indexmenu {
width: 100%;
height: 80px;
background: rgba(255, 255, 255, 0.85);
position: absolute;
left: 0;
bottom: 0;
padding-top: 10px;
z-index: 1;
}
@media (max-width: 999px) {
.index_main > .indexmenu {
display: none;
}
}
/* Info */
/* Attention Box Index */
.box_attention_index {
background: #fff;
width: 100%;
padding: 1em;
line-height: 1.6;
border: 5px solid #e0363c;
}
section.info {
/*background: rgb(21, 109, 157);
background: linear-gradient(90deg, rgb(13, 163, 186, 1) 0%, rgb(21, 109, 157, 1) 100%);*/
background: transparent;
color: #fff;
padding: 0;
}
section.info .inner {
width: 100%;
/*background-image: url(../images/index/index_bg_01.png);
background-size: 2000px 1280px;
background-position: center top;*/
color: #fff;
padding: 80px 0;
}
@media (max-width: 999px) {
section.info .inner {
width: 92%;
}
}
section.info a {
color: #fff;
}
section.info a:hover {}
section.info h2 {
width: 100%;
max-width: 1000px;
margin: 0 auto;
color: #fff;
text-align: left;
font-size: 1.75em;
font-weight: 500;
display: flex;
align-items: center;
}
section.info h2:before {
content: "";
width: 1.15em;
height: 1.15em;
background-color: #fff;
display: inline-block;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
mask-image: url('data:image/svg+xml;charset=UTF-8,');
mask-repeat: no-repeat;
mask-position: center;
margin-right: 0.25em;
}
section.info h2:after {
content: none;
}
section.info dl {
width: 100%;
max-width: 1000px;
height: 180px;
margin: 0 auto;
text-align: left;
line-height: 1.6;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
section.info dl > dt, section.info dl > dd {
padding-top: 20px;
padding-bottom: 20px;
}
section.info dl > dt {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
float: left;
}
@media (max-width: 768px) {
section.info dl > dt {
float: none;
padding-top: 1em;
padding-bottom: 0;
border-bottom: none;
}
}
section.info dl > dt .date {
background: #fff;
color: #111;
padding: 0.25em 0.75em;
line-height: 1;
border-radius: 0.85em;
}
section.info dl > dd {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
display: flex;
position: relative;
padding-left: 1em;
padding-right: 65px;
}
@media (max-width: 768px) {
section.info dl > dd {
padding-left: 0;
padding-top: 0.25em;
padding-bottom: 1em;
}
}
section.info dl > dd:after {
content: "";
background: rgba(255, 255, 255, 0.5);
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-size: 1.25em;
background-repeat: no-repeat;
background-position: center;
color: #2380b3;
width: 60px;
height: 100%;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
}
@media (max-width: 768px) {
section.info dl > dd:after {
height: calc(100% + 2.65em);
transform: translateY(-2.625em);
}
}
/*section.info dl > dd:before {
content: "";
width: 1.25em;
height: 1.25em;
background-color: #2380b3;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
mask-image: url('data:image/svg+xml;charset=UTF-8,');
mask-repeat: no-repeat;
mask-position: center;
display: inline-block;
position: absolute;
top: 50%;
right: 16px;
margin-right: 0.25em;
transform: translateY(-50%);
z-index: 1;
}
section.info dl > dd.none:before {
content: none;
}*/
section.info dl > dd.none:after {
content: none;
}
/* Overview
----------------------------------------------------*/
#about, #outline, #agenda, #venue, #report {
top: -160px;
position: relative;
display: block;
width: 100%;
height: 0px;
z-index: -10;
margin-top: -0px;
margin-bottom: -0px;
}
@media (max-width: 999px) {
#about, #outline, #agenda, #venue, #report {
top: -60px;
}
}
/* Agenda
----------------------------------------------------*/
/* Links
----------------------------------------------------*/
/* Press
----------------------------------------------------*/
.press_list {}
.press_list > dt, .press_list > dd {
padding: 16px 0 16px;
}
.press_list > dt {
float: left;
}
.press_list > dd {
border-bottom: 1px solid #ddd;
padding-left: 6em;
}
/* Relevant
----------------------------------------------------*/
/* Program
----------------------------------------------------*/
.program_list {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.program_list .prg_title {
margin-top: 1em;
padding-left: 4em;
color: #000;
font-weight: 700;
text-indent: -4em;
}
.program_list .prg_title > .title_number {
display: inline-block;
background: #000;
width: 3.5em;
margin-right: 0.5em;
padding: 0 0.15em;
color: #fff;
line-height: 1.15;
text-indent: 0;
text-align: center;
}
.program_list dt {
float: left;
width: 3em;
}
.program_list dt:after {
content: "：";
}
.program_list dd {
display: block;
padding-left: 9em;
text-indent: -6em;
}
.program_list dd .prg_name {
text-indent: 0;
display: inline-table;
width: 5em;
}
.prg_time {
text-align: right;
}
.prg_time {
text-align: right;
color: #555;
}
.prg_sponsor {
margin-top: 10px;
text-align: right;
}
/* Flyer Style */
section .prg_flyer {
float: right;
margin-left: 1em;
overflow: hidden;
}
section .prg_flyer img {
width: 100px;
float: right;
}
section .prg_flyer a:hover img {
filter: alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
opacity: 0.6;
transition: 0.2s;
}
section .prg_flyer a:not(:first-of-type) {
display: none;
}
/* Irregular Option */
section h3 + .prg_time {
margin-top: -20px;
}
section h4.prg {
font-size: 1.25em;
padding-right: 4em;
}
section h4.prg .prg_icon {
position: absolute;
bottom: 3px;
right: 0;
padding: 0.15em;
color: #fff;
font-size: 0.7em;
font-weight: normal;
border-radius: 2px;
}
/*----------------------------------------------------
9.0 - Option
----------------------------------------------------*/
/* List - Text
----------------------------------------------------*/
/* No icon Style */
ul.list_normal_jp li {
padding-left: 1em;
}
ul.list_normal_jp li {
padding-left: 1em;
text-indent: -1em;
}
/* No icon Style/English */
ul.list_normal_en li {
padding-left: 0.425em;
}
ul.list_normal_en li {
padding-left: 0.425em;
text-indent: -0.425em;
}
/* Disk Style */
ul.list_disc {
margin-left: 1em;
}
ul.list_disc li {
position: relative;
}
ul.list_disc li:after {
display: block;
background-color: #0d79b4;
content: "";
position: absolute;
top: 0.65em;
left: -0.75em;
width: 6px;
height: 6px;
border-radius: 100%;
}
/* Mark Style */
ul.list_mark li {
padding-left: 1em;
position: relative;
}
ul.list_mark li:before, ul.list_mark li:after {
content: " ";
position: absolute;
}
ul.list_mark li:after {
top: 0.7rem;
left: 0.6rem;
border: 0.6rem solid transparent;
border-left: 0.7rem solid #0d79b4;
}
/* Link Style */
ul.list_link li {
padding: 0 0 0.5em 1em;
position: relative;
border-bottom: 1px solid #ddd;
}
ul.list_link li:before {
display: block;
position: absolute;
content: url('data:image/svg+xml;charset=UTF-8,');
width: 1em;
height: 1em;
margin-left: -1em;
transform: translateY(0.15em);
color: #000;
}
/* Decimal Style */
ol.list_decimal {
list-style: none;
counter-reset: num;
margin-left: 2em;
}
ol.list_decimal > li {
position: relative;
}
ol.list_decimal > li:before {
counter-increment: num;
content: counter(num) ".";
display: inline-block;
position: absolute;
width: 2em;
top: 0;
left: -2em;
margin-right: 2em;
text-align: center;
}
/* Decimal (Parentheses) Style */
ol.list_numberParen {
list-style-type: none;
counter-reset: ol_li;
margin-left: 2em;
}
ol.list_numberParen > li {
position: relative;
}
ol.list_numberParen > li:before {
counter-increment: ol_li;
content: "("counter(ol_li) ")";
display: inline-block;
position: absolute;
width: 2em;
top: 0;
left: -2em;
margin-right: 2em;
text-align: center;
}
/* Decimal (Parentheses - One Side) Style */
ol.list_numberParenR {
list-style-type: none;
counter-reset: ul_lione;
margin-left: 2em;
}
ol.list_numberParenR > li {
position: relative;
}
ol.list_numberParenR > li:before {
counter-increment: ul_lione;
content: counter(ul_lione) ")";
display: inline-block;
position: absolute;
width: 2em;
top: 0;
left: -2em;
margin-right: 2em;
text-align: center;
}
/* List - Button
----------------------------------------------------*/
ul.list_button {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
line-height: 1.1;
text-align: center;
}
ul.list_button li {
margin: 0 auto 0.75em;
}
ul.list_button > li a {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
min-width: 40%;
height: 60px;
color: #000;
text-decoration: none;
border: 2px solid #0d79b4;
border-radius: 30px;
box-shadow: 0 2px 5px #ccc;
transition: 0.3s;
}
ul.list_button > li a:hover {
background-color: #0d79b4;
border-radius: 30px;
color: #fff;
}
ul.list_button > li.notLink {
display: flex;
justify-content: center;
align-items: center;
background-color: #bcbcbc;
height: 60px;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
border-radius: 30px;
box-shadow: 0 2px 5px #ccc;
transition: 0.3s;
}
ul.list_button.btn_col01 > li {
width: 48%;
}
ul.list_button.btn_col02 > li {
width: 48%;
}
ul.list_button.btn_col02_center > li {
width: 40%;
}
ul.list_button.btn_col03 > li {
width: 30%;
}
@media (max-width: 768px) {
ul.list_button.btn_col02_center > li, ul.list_button.btn_col03 > li {
width: 48%;
}
}
@media (max-width: 480px) {
ul.list_button.btn_col02_center > li, ul.list_button.btn_col03 > li {
width: 96%;
}
}
/* 2 Column After */
ul.list_button.btn_col02:after {
content: "";
display: block;
width: 50%;
height: 0;
}
/* 3 Column After */
ul.list_button.btn_col03:after {
content: "";
display: block;
width: 66.67%;
height: 0;
}
@media (max-width: 768px) {
ul.list_button.btn_col03:after {
width: 50%;
}
}
/* List - Banner
----------------------------------------------------*/
ul.list_banner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
line-height: 1.1;
text-align: center;
margin: auto;
}
ul.list_banner li {
margin: 0 0 0.75em;
}
ul.list_banner li a {
display: block;
}
ul.list_banner li a img {
width: 100%;
border: 1px solid #ddd;
transition: 0.3s;
vertical-align: middle;
}
ul.list_banner > li a img:hover {
border: 1px solid #999;
}
ul.list_banner li.blank {
margin: 0;
}
ul.list_banner.banner_col01 {
width: 24%;
}
ul.list_banner.banner_col02 {
width: 50%;
}
ul.list_banner.banner_col03 {
width: 75%;
}
ul.list_banner.banner_col04 {
width: 100%;
}
ul.list_banner.banner_col01 > li {
width: 100%;
}
ul.list_banner.banner_col02 > li {
width: 48%;
}
ul.list_banner.banner_col03 > li {
width: 32%;
}
ul.list_banner.banner_col04 > li {
width: 24%;
}
@media (max-width: 480px) {
ul.list_banner.banner_col01 {
width: 48%;
}
ul.list_banner.banner_col02, ul.list_banner.banner_col03 {
width: 100%;
}
ul.list_banner.banner_col01 {
width: 100%;
}
ul.list_banner.banner_col03 > li, ul.list_banner.banner_col04 > li {
width: 48%;
}
}
/* List - Image
----------------------------------------------------*/
ul.list_image {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
line-height: 1;
text-align: center;
}
ul.list_image > li {}
ul.list_image > li img {
vertical-align: middle;
width: 100%;
height: auto;
}
ul.list_image.image_col01 > li {
width: 100%;
}
ul.list_image.image_col02 > li {
width: 48%;
margin-top: 4%;
}
ul.list_image.image_col02 > li:nth-of-type(-n + 2) {
margin-top: 0;
}
ul.list_image.image_col03 > li {
width: 32%;
margin-top: 2%;
}
ul.list_image.image_col03 > li:nth-of-type(-n + 3) {
margin-top: 0;
}
ul.list_image.image_col04 > li {
width: 24%;
}
ul.list_image > li > p {
margin-top: 0.5em;
}
@media (max-width: 768px) {
ul.list_image[class*="image_col"] > li:nth-of-type(n) {
width: 48%;
margin-top: 4%;
}
ul.list_image[class*="image_col"] > li:nth-of-type(-n + 2) {
margin-top: 0;
}
}
@media (max-width: 480px) {
ul.list_image[class*="image_col"] > li:nth-of-type(n) {
width: 100%;
margin-top: 4%;
}
ul.list_image[class*="image_col"] > li:first-of-type {
margin-top: 0;
}
}
/* Table
----------------------------------------------------*/
table.table_normal {
width: 100%;
border: solid 1px #ddd;
}
table.table_normal th {
padding: 10px;
background: #f8f1dc;
border-left: solid 1px #ddd;
border-bottom: solid 1px #ddd;
font-weight: 700;
}
table.table_normal td {
padding: 10px;
background: #fff;
border-left: solid 1px #ddd;
border-bottom: solid 1px #ddd;
}
/* Vertical Setting */
table th.vtl_center, table td.vtl_center {
vertical-align: middle;
}
/* Scroll */
@media (max-width: 768px) {
.table_scroll {
overflow-x: scroll;
}
.table_scroll::-webkit-scrollbar {
height: 10px;
}
.table_scroll::-webkit-scrollbar-track {
margin: 0 2px;
background: #ccc;
border-radius: 5px;
}
.table_scroll::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #666;
}
.table_scroll:after {
content: "*If the window size is narrow, this table is displayed with side scrolling.";
position: relative;
font-size: calc(768px * 0.015625);
}
.table_scroll .table_normal {
min-width: 700px;
}
}
/* Stack */
table.table_stack_sp {
width: 100%;
}
table.table_stack_sp th {
padding: 2em;
font-weight: 700;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-bottom: solid 1px #ccc;
}
table.table_stack_sp td {
padding: 2em;
vertical-align: middle;
border-bottom: solid 1px #ccc;
}
@media (max-width: 480px) {
table.table_stack_sp th {
width: auto;
background: #fff;
text-align: left;
}
table.table_stack_sp th, table.table_stack_sp td {
border-bottom: none;
border: 1px solid #ccc;
}
table.table_stack_sp th, table.table_stack_sp td {
display: list-item;
list-style: none;
width: 100%;
padding: 5px;
border-width: 1px 0 0;
}
}
/* Back Ground Color
----------------------------------------------------*/
.bg_blue {
background: #000;
}
.bg_green {
background: #509869;
}
.bg_red {
background: #e0363c;
}
.bg_orange {
background: #ec7430;
}
/* Align
----------------------------------------------------*/
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
/* Hr
-----------------------------------------------*/
hr {
border: solid 1px #ddd;
}
/* Text
----------------------------------------------------*/
sub, sup {
font-size: 0.75em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
strong {
font-weight: 700;
}
.tx_cancel {
text-decoration: line-through;
}
.tx_cancel_red {
text-decoration: line-through;
color: #e0363c;
}
.tx_cancel_red span {
color: black;
}
.tx_red {
color: #e0363c;
}
.tx_blue {
color: #000;
}
.tx_black {
color: #000;
}
.tx_white {
color: #fff;
}
.tx_13 {
font-size: 1.3rem;
}
.tx_13B {
font-size: 1.3rem;
font-weight: 700;
}
.tx_14 {
font-size: 1.4rem;
}
.tx_14B {
font-size: 1.4rem;
font-weight: 700;
}
.tx_15 {
font-size: 1.5rem;
}
.tx_15B {
font-size: 1.5rem;
font-weight: 700;
}
.tx_16 {
font-size: 1.6rem;
}
.tx_16B {
font-size: 1.6rem;
font-weight: 700;
}
.tx_17 {
font-size: 1.7rem;
}
.tx_17B {
font-size: 1.7rem;
font-weight: 700;
}
.tx_18 {
font-size: 1.8rem;
}
.tx_18B {
font-size: 1.8rem;
font-weight: 700;
}
.tx_20 {
font-size: 2rem;
}
.tx_20B {
font-size: 2rem;
font-weight: 700;
}
.tx_22 {
font-size: 2.2rem;
}
.tx_22B {
font-size: 2.2rem;
font-weight: 700;
}
@media (max-width: 768px) {
.tx_13, .tx_13B {
font-size: 1.2rem;
}
.tx_14, .tx_14B {
font-size: 1.3rem;
}
.tx_15, .tx_15B {
font-size: 1.4rem;
}
.tx_16, .tx_16B {
font-size: 1.5rem;
}
.tx_17, .tx_17B {
font-size: 1.6rem;
}
.tx_18, .tx_18B {
font-size: 1.7rem;
}
.tx_20, .tx_20B {
font-size: 1.8rem;
}
.tx_22, .tx_22B {
font-size: 2rem;
}
}
.tx_space01 {
letter-spacing: 0.1rem;
}
.tx_space02 {
letter-spacing: 0.2rem;
}
.tx_space03 {
letter-spacing: 0.3rem;
}
.tx_space04 {
letter-spacing: 0.4rem;
}
.tx_space05 {
letter-spacing: 0.5rem;
}
.tx_space_n001 {
letter-spacing: -0.01rem;
}
.tx_space_n005 {
letter-spacing: -0.05rem;
}
.tx_space_n01 {
letter-spacing: -0.1rem;
}
.tx_space_n02 {
letter-spacing: -0.2rem;
}
.tx_space_n03 {
letter-spacing: -0.3rem;
}
.tx_indent01 {
padding-left: 1em;
text-indent: -1em;
}
.tx_indent02 {
padding-left: 2em;
text-indent: -2em;
}
/* Line Height
----------------------------------------------------*/
.line_height00 {
line-height: 0;
vertical-align: middle;
}
.line_height01 {
line-height: 1;
vertical-align: middle;
}
.line_height02 {
line-height: 2;
vertical-align: middle;
}
/* Text Break
----------------------------------------------------*/
@media (max-width: 999px) {
span.br999_under:before {
content: "\A";
white-space: pre;
}
}
@media (max-width: 768px) {
span.br768_under:before {
content: "\A";
white-space: pre;
}
}
@media (max-width: 480px) {
span.br480_under:before {
content: "\A";
white-space: pre;
}
}
/* Margin
----------------------------------------------------*/
.mgt_10 {
margin-top: 10px;
}
.mgt_20 {
margin-top: 20px;
}
.mgt_30 {
margin-top: 30px;
}
.mgt_40 {
margin-top: 40px;
}
.mgt_50 {
margin-top: 50px;
}
.mgb_10 {
margin-bottom: 10px;
}
.mgb_20 {
margin-bottom: 20px;
}
.mgb_30 {
margin-bottom: 30px;
}
.mgb_40 {
margin-bottom: 40px;
}
.mgb_50 {
margin-bottom: 50px;
}
.mgl_10 {
margin-left: 10px;
}
.mgl_01 {
margin-left: 1em;
}
.mgl_02 {
margin-left: 2em;
}
.mgl_03 {
margin-left: 3em;
}
.mgl_04 {
margin-left: 4em;
}
.mgl_05 {
margin-left: 5em;
}
/* Icon
----------------------------------------------------*/
/*Link Blank Icon*/
.link:after {
content: "";
width: 1em;
height: 1em;
background-color: #666;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
mask-image: url('data:image/svg+xml;charset=UTF-8,');
mask-repeat: no-repeat;
mask-position: center;
display: inline-block;
transform: translate(0.25em, 0.2em);
}
.pdf:after {
font-family: "Font Awesome 5 Free";
content: "\f1c1";
margin-left: 0.2em;
color: #f54328;
font-size: 1.6em;
font-weight: 900;
}
.ppt:after {
font-family: "Font Awesome 5 Free";
content: "\f1c4";
margin-left: 0.2em;
color: #ce6243;
font-size: 1.6em;
font-weight: 900;
}
.word:after {
font-family: "Font Awesome 5 Free";
content: "\f1c2";
margin-left: 0.2em;
color: #254c9b;
font-size: 1.6em;
font-weight: 900;
}
.excel:after {
font-family: "Font Awesome 5 Free";
content: "\f1c3";
margin-left: 0.2em;
color: #347241;
font-size: 1.6em;
font-weight: 900;
}
.ssl:after {
font-family: "Font Awesome 5 Free";
content: "\f084";
margin-left: 0.2em;
color: #ceaf28;
font-size: 1.6em;
font-weight: 900;
}
/* Triangle Icon */
.triangle {
/* margin: 0; */
padding-left: 1em;
text-indent: -1em;
position: relative;
}
.triangle:before {
content: "\025b6";
color: #000;
}
/* Page Top
----------------------------------------*/
#page_top {
position: fixed;
display: flex;
bottom: 30px;
right: 40px;
margin: 0;
z-index: 2;
}
#page_top a {
display: block;
line-height: 0;
opacity: 0.85;
position: relative;
width: 60px;
height: 60px;
text-align: center;
border: 2px solid #fff;
border-radius: 50%;
vertical-align: middle;
transition: 0.4s;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
#page_top a:before {
position: absolute;
top: 25px;
left: 35%;
content: "";
width: 15px;
height: 15px;
margin: auto;
border-left: 3px solid #fff;
border-top: 3px solid #fff;
vertical-align: middle;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#page_top a {
background-color: #000;
font-weight: 700;
color: #fff;
text-decoration: none;
}
#page_top a:hover {
background-color: #666;
}
@media (max-width: 480px) {
#page_top {
right: 20px;
}
#page_top a:before {
top: 18px;
left: 33%;
}
#page_top a {
width: 50px;
height: 50px;
}
}
/* Background
----------------------------------------*/
.bg_beige {
background: #f3efec;
}
.bg_aqua {
background: #f3f8fb;
}
/* Float
----------------------------------------------------*/
.fL {
float: left;
margin: 0 1em 10px 0;
}
.fR {
float: right;
margin: 0 0 10px 1em;
}
/* Attention
----------------------------------------------------*/
.box_attention {
max-width: 100%;
padding: 1em;
line-height: 1.6;
border: 5px solid #e0363c;
}
/* Construction
----------------------------------------------------*/
.construction {
width: 60%;
margin: 5% auto 30%;
padding: 20px 40px;
display: block;
color: #bbb;
text-align: center;
border: 3px solid #ddd;
}
.construction .title {
font-size: 1.2em;
font-weight: 700;
}
@media (max-width: 480px) {
.construction {
padding: 10px 20px;
}
}