@charset 'utf-8';
/* page
------------------------------------------------ */
.page{ padding-bottom: 100px; background-color: #F8FBFF; }
.page-content{ padding-top: 60px; }
.page-headline{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; height: 280px; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; color:#fff; text-align: center; letter-spacing: 0.072em; background-image: url(../../img/share/sample.jpg); }
.page-headline .en{ display: block; font-weight: 400; font-size: 1.6rem; line-height: calc(27 / 16); text-transform: uppercase; }
.page-headline .ja{ display: block; font-size: 5rem; font-weight: 400; line-height:calc(68 / 50); }

.breadcrumb{ margin-top: 20px; }
.breadcrumb--list{ display: flex; flex-wrap: wrap; }
.breadcrumb--list a{ color:#777777; }
.breadcrumb--list li{ font-size: 1.2rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(17 / 12); }
.breadcrumb--list li:not(:last-child):after{ padding: 0 6px; content:'>'; color:#777777; }

@media only screen and (max-width: 768px) {
    .page{ padding-bottom: 70px; }
    .page-headline{ height: 175px; }
    .page-headline .en{ font-size: 1.3rem; }
    .page-headline .ja{ margin-top: 3px; font-size: 3rem; }

    .breadcrumb{ margin-top: 15px; }
}

.page-title-01{ position: relative; font-size: 3rem; font-weight: bold; letter-spacing: 0.072em; line-height: normal; text-transform: capitalize; }
.page-title-01::after{ margin-top: 10px; content: ''; display: block; width: 40px; height: 6px; background-color: #32A0EF; }

@media only screen and (max-width: 768px) {
    .page-title-01{ font-size: 1.6rem; }
    .page-title-01::after{ margin-top: 6px; width: 20px; height: 3px; }
}