@charset "UTF-8";

p {
    margin-bottom: 10px;
}

.underlayer {
    background: none;
}

.underlayer__contents:has(.pagination) {
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .contents__inner {
        padding-left: 0;
        padding-right: 0;
    }
}

.title__ico-nega figure {
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    left: 0;
}
.title__ico-nega.sub__title[class *= "txc-"]::before {
  background-color: transparent !important;
}

.contentsbg label .ellipse {
    margin-bottom: .25rem;
}

.border_table,
.underline_table {
    width: 100%;
	border-collapse: collapse;
}
.border_table,
.border_table tr > * {
	border: 1px solid rgb(89, 89, 89);
}
.border_table tr > * {
    text-align: center;
    padding: .5rem;
}
.underline_table tr {
	border-bottom: 1px solid rgb(89, 89, 89);
}
.underline_table tr > * {
    padding: .5rem 1rem;
}
@media print, screen and (max-width: 768px) {
    .underline_table tr > * {
        padding: .5rem;
    }
}

.box .border_table tr th {
    padding: .2rem .5rem;
}

.flex.table {
    width: 100%;
	border-top: 1px solid rgb(89, 89, 89);
	border-left: 1px solid rgb(89, 89, 89);
    align-items: stretch;
}
.flex.table .flex.table {
	border-top: none;
	border-left: none;
}
.flex.table .vertical-M {
    justify-content: center;
    align-items: center;
}
.flex.table > * {
    height: auto;
	border-right: 1px solid rgb(89, 89, 89);
	border-bottom: 1px solid rgb(89, 89, 89);
    padding: 10px;
}
@media print, screen and (max-width: 768px) {
    .flex.table > * {
        width: 100% !important;
    }
}

@media print, screen and (max-width: 768px) {
  table.sp-scroll {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border: none;
  }
}

.box,
.box [class *= "btn__"] {
    width: 100%;
}

dl.box dt, 
dl.box dd {
    width: 100%;
    padding: 1rem 1.5rem;
}
dl.box dt {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

dl.box dd [class *= "border"],
dl.alert-box dd [class *= "border"] {
    display: inline-block;
}

dl.box dd .btn,
dl.alert-box dd .btn {
    min-width: 12rem;
}
@media print, screen and (max-width: 768px) {
    dl.box dd .btn,
    dl.alert-box dd .btn {
        min-width: auto;
    }
}

.alert-box {
    padding: 1.2rem 1rem 1rem;
}
.alert-box dd {
    padding-left: 10px;
    padding-right: 10px;
}
.alert-box dd p:last-child {
    margin-bottom: 0;
}

dl.picture {
    position: relative;
}
dl.picture dt > * {
    display: inline-block;
}
dl.picture dt figure {
    width: 1.5em !important;
    height: 1.5em;
    padding: .25rem;
    position: relative;
    left: -.5em;
    float: left;
}
dl.picture dd:has( > figure ) {
    width: auto;
    position: absolute;
    right: 0;
    bottom: 0;
}
dl.picture.intro dd > figure {
	float: right;
}
@media print, screen and (min-width: 769px) {
    dl.picture dd {
        min-height: 156px;
		font-size: 120%;
    }
}
@media print, screen and (max-width: 1024px) and (min-width: 769px) {
    dl.picture.box dd > figure {
        width: 100px;
    }
}
@media print, screen and (max-width: 768px) {
    dl.picture dd:has( > figure ) {
        position: static;
    }
    dl.picture.box dd:has( > figure ) {
        padding: 0;
        margin-right: 1rem;
    }
    dl.picture.box dd > figure {
        width: 30%;
        float: right;
        padding-bottom: .5rem;
    }
}

@media print, screen and (min-width: 769px) {
	dl.picture.intro {
		min-height: 600px;
	}
	dl.picture.intro dd ul {
		text-shadow: -1px -1px 0 rgb(255, 255, 255),  
					 1px -1px 0 rgb(255, 255, 255),
					 -1px 1px 0 rgb(255, 255, 255),
					 1px 1px 0 rgb(255, 255, 255);
	}
	dl.picture.intro dd:has( > figure ) {
		z-index: -1;
	}
}

.btn {
    max-width: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
    padding: 1rem;
}

.step {
    text-align: center;
    padding: 1.5rem 0;
}
.step .tri-B {
    width: 50px;
    height: 20px;
    display: inline-block;
    clip-path: polygon( 0 0, 100% 0%, 50% 100% );
}

.shorter-line {
	position: relative;
    margin-bottom: 2rem;
}
.shorter-line > span {
  width: auto;
  display: inline-block;
}
.shorter-line > span::after {
	content: '';
	width: 8rem;
	height: 2px;
    position: absolute;
    left: calc( ( 100% - 8rem ) / 2 );
	bottom: -.75rem;
    display: inline-block;
}

.sub__title.underline {
  padding-bottom: .25rem;
}
.sub__title.underline + *,
.flex:has( > .sub__title.underline ) + * {
  margin-top: 0;
}

[class *= "_stripe"] {
    padding: .75rem;
}
@media print, screen and (max-width: 768px) {
.over-title {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.over-title > span {
    width: auto;
    font-size: 1.5rem;
    font-weight: 600;
    padding: .5rem 2rem;
    display: inline-block;
    position: relative;
    top: 2rem;
    z-index: 1;
}
.over-title + * > [class *= "bgc-"] {
    padding: 2.5rem .75rem 1rem;
}

.movie iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 315;
}
.map iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 350;
}

.item-quote {
    padding: .75rem 1rem;
}

.emphasize {
    font-size: 2rem;
    font-weight: 600;
    border-bottom: solid;
    border-width: 8px;
    padding: .5em 1rem .25rem;
    margin-bottom: 20px;
    display: inline-block;
}
@media print, screen and (max-width: 768px) {
  .emphasize {
    font-size: 1.5rem;
  }
}

.ellipse {
    border-radius: .8em;
    padding: 0 1rem;
    display: inline-block;
}

.parallelogram {
    clip-path: polygon( 1rem 0, 100% 0, calc( 100% - 1rem ) 100%, 0 100% );
    display: inline-block;
	padding: .5rem calc( 1rem + 1rem );
}

.boxshadow {
	font-size: 120%;
    border-radius: .75rem;
	box-shadow: 3px 3px rgba(2, 90, 106, 1);
}

.flow .flex {
    justify-content: end;
}
.flow .checkpoint {
    width: calc( 100% - 40px - 1.25rem - 1rem );
    text-align: center;
    padding: 1rem;
    position: relative;
    left: 0;
}
.flow .checkpoint:last-child {
    margin-bottom: .5rem;
}
.flow .checkpoint:not(:last-child) {
    margin-bottom: 1rem;
}
.flow .checkpoint:not(:last-child)::before {
    content: "";
    width: 2px;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 40px;
    left: calc( -15px - 2px - 1.25rem - 1rem );
}
.flow .checkpoint::after {
    content: "";
    width: 1.25rem;
    height: 1.5rem;
    clip-path: polygon( 0 50%, 100% 0, 100% 100% );
    display: inline-block;
    position: absolute;
    top: calc( ( 53px - 1.5rem ) / 2 );
    left: -1.25rem;
}
.flow .checkpoint .image {
    width: 40px; 
    height: 40px; 
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: .33rem;
    left: calc( -40px - 1.25rem - .5rem - 2px );
    overflow: hidden;
}
.flow .checkpoint .image > [class *= "txc-"] {
    font-size: 14px;
    margin-top: calc( ( ( 40px - 2px * 2 ) - 14px * 1.5 ) / 2 );
}
.flow .checkpoint .ellipse {
    font-size: 1.2rem;
}
.flow .checkpoint a,
.flow .checkpoint > p,
.flow .checkpoint [class *= "txc-"] {
    margin: .5rem 0 0;
}
@media print, screen and (max-width: 768px) {
    .flow .checkpoint {
        width: 100%;
        text-align: left;
        left: 0;
    }
    .flow .checkpoint:not(:last-child) {
        margin-bottom: 1.25rem;
    }
    .flow .checkpoint:not(:last-child)::before {
        content: "";
        width: 2px;
        height: 100%;
        display: inline-block;
        position: absolute;
        top: calc( 15px + 2px );
        left: 50%;
        z-index: -1;
    }
    .flow .checkpoint::after {
        display: none;
    }
    .flow .checkpoint .image {
        position: static;
    }
    .flow .checkpoint .ellipse {
        position: absolute;
        top: calc( ( 40px - 1.2rem * 1.5 ) / 2 + 1rem );
        left: calc( 40px + 1rem + .75rem );
    }
    .flow .checkpoint > p {
        margin-top: 1rem;
    }
    .flow .checkpoint [class *= "txc-"] {
        text-align: center;
    }
}

.history .underlayer__contents {
    min-height: auto !important;
}
.history .chronology {
    position: relative;
    padding: 0 20px;
}
.history .chronology .timing {
    position: relative;
}
.history .chronology .timing::before {
    content: "";
    width: 25px;
    height: 25px;
    background-color: rgb(255, 255, 255);
    border: .1rem solid rgba(2, 90, 106, 1);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: calc( ( 100% - 25px ) / 2 );
    left: calc( ( 100% - 25px ) / 2 );
}
.history .chronology .timing > [class *= "year_"]::before {
    content: "";
    width: 3px;
    height: 35px;
    background-color: rgba(2, 90, 106, 1);
    position: absolute;
    left: calc( ( 100% - 3px ) / 2 );
    z-index: -1;
}
.history .chronology .timing > [class *= "year_"] .event > span[class *= "bgc-"] {
    padding: 2px 1rem;
    display: inline-block;
}
.history .chronology .shaft {
    width: 100%;
    height: 12px;
    position: absolute;
    top: calc( ( 100% - 12px ) / 2 );
    left: 0;
    z-index: -1;
}
.history .chronology .shaft::before,
.history .chronology .shaft::after {
    content: "";
    background-color: rgba(255, 255, 255);
    position: absolute;
}
@media print, screen and (min-width: 769px) {
    .history .chronology .flex {
        height: calc( ( ( 1rem * 1.5 + 2px * 2 ) + 10px + ( 1rem * 1.5 * 4 ) + 30px ) * 2 );
        align-items: stretch;
    }
    .history .chronology .timing {
        text-align: center;
    }
    .history .chronology .timing > [class *= "year_"] {
        height: calc( ( 100% - 12px ) / 2 );
    }
    .history .chronology .timing > .year_over {
        position: absolute;
        bottom: 0;
    }
    .history .chronology .timing > .year_over .year {
        position: absolute;
        top: calc( -1 * ( 12px + 1.5rem + 1.5rem + .25em ) );
    }
    .history .chronology .timing > .year_over .event {
        position: relative;
        top: 30px;
    }
    .history .chronology .timing > .year_under {
        position: relative;
        top: 0;
    }
    .history .chronology .timing > .year_under .year {
        position: absolute;
        top: calc( 100% + 1.5rem );
    }
    .history .chronology .timing > .year_under .event {
        position: absolute;
        bottom: 30px;
    }
    .history .chronology .timing > .year_over::before {
        top: 0;
    }
    .history .chronology .timing > .year_under::before {
        top: calc( 100% - 30px );
    }
    .history .chronology .shaft::before,
    .history .chronology .shaft::after {
        width: 12px;
        height: 12px;
    }
    .history .chronology .shaft::before {
        clip-path: polygon( 100% 0, 100% 100%, 0 100% );
        right: 0;
    }
    .history .chronology .shaft::after {
        clip-path: polygon( 0 0, 100% 0, 0 100% );
        left: 0;
    }

    .history .contents__area .contents__inner.flex .flex .txc-basic {
        margin-bottom: 20px !important;
    }
}
@media print, screen and (max-width: 768px) {
    .history .chronology {
        padding-top: 10px;
        padding-bottom: 20px;
        padding-right: 0;
    }
    .history .chronology .timing {
        padding-left: 1.5rem;
    }
    .history .chronology .timing::before {
        width: 1.5rem;
        height: 1.5rem;
        top: calc( 2rem + ( 1rem * 1.5 + 2px * 2 ) - ( ( 1.5rem - 3px ) / 2 ) );
        left: -20px;
    }
    .history .chronology .timing > [class *= "year_"]::before {
        width: calc( 1rem + 1.5rem );
        height: 3px;
        position: absolute;
        top: calc( 2rem + ( 1rem * 1.5 + 2px * 2 ) );
        left: -1rem;
    }
    .history .chronology .timing > [class *= "year_"] .year {
        margin-left: 1rem;
    }
    .history .chronology .timing > [class *= "year_"] .event > ul {
        margin-left: .5rem;
    }
    .history .chronology .shaft {
        width: 1rem;
        height: 100%;
        top: 0;
        left: calc( ( 1.5rem - 1rem ) / 2 );
    }
    .history .chronology .shaft::before,
    .history .chronology .shaft::after {
        width: 1rem;
        height: 1rem;
        left: 0;
    }
    .history .chronology .shaft::before {
        clip-path: polygon( 0 0, 100% 0, 0 100% );
        top: -1px;
    }
    .history .chronology .shaft::after {
        clip-path: polygon( 100% 0, 100% 100%, 0 100% );
        bottom: 0;
    }

    .history .contents__area .contents__inner.flex .flex {
        padding: .5rem;
    }
    .history .underline_table .ellipse {
        padding: 0 .5rem;
    }
    .history .underline_table tbody td {
        width: 35%;
    }
}

.flex[class *= "col"] > figure.next {
    width: 2rem;
}
@media print, screen and (min-width: 769px) {
    .flex[class *= "col"]:has( figure.next ) > dl > dt.border {
        width: 7rem;
    }
    .flex[class *= "col"]:not([class *= "sp"]) > figure.next {
        padding-right: 20px;
        transform: rotate(270deg);
    }
}
@media print, screen and (max-width: 768px) {
   .flex[class *= "col"] > figure.next {
        margin-top: 0 !important;
    }
   .flex[class *= "col"] > figure.next img {
        width: 20% !important;
    }
}

.outer__contents__area ol.milestone[class *= "grid"] {
	position: relative;
}
ol.milestone[class *= "grid"] {
	font-weight: 600;
	grid-column-gap: 0;
	grid-row-gap: 0;
}
ol.milestone[class *= "grid"] > li,
ol.milestone[class *= "grid"] > li .notes,
ol.milestone[class *= "grid"] > li .notes .text__small {
	position: relative;
}
ol.milestone[class *= "grid"] > li .tile {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}
ol.milestone[class *= "grid"] > li .ellipse {
	position: absolute;
}
ol.milestone[class *= "grid"] > li .ellipse,
ol.milestone[class *= "grid"] > li .notes {
	z-index: 2;
}
ol.milestone[class *= "grid"] > li .ellipse + .flex {
	height: 100%;
}
ol.milestone[class *= "grid"] > li .notes {
	font-size: 150%;
	line-height: 1.25;
	padding-left: .5rem;
	padding-right: .5rem;
}
ol.milestone[class *= "grid"] > li .notes .text__small {
	top: -.25rem;
}
@media print, screen and (max-width: 1023px) and (min-width: 901px) {
	ol.milestone[class *= "grid"] > li .notes {
		font-size: 100%;
	}
	ol.milestone[class *= "grid"] > li .notes .text__small {
		top: 0;
	}
}
ol.milestone[class *= "grid"] > li .tile.bgc-white {
	z-index: 0;
}
@media print, screen and (min-width: 769px) {
	
	.outer__contents__area:has( ol.milestone[class *= "grid"] ) {
		margin-top: calc( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 1.5rem ) / 2 + 35px );
	}
	.outer__contents__area ol.milestone[class *= "grid"] {
		position: relative;
		top: calc( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 1.5rem ) / 2 * -1 );
	}
	.outer__contents__area ol.milestone[class *= "grid"] + * {
		margin-top: -50px;
	}
	
	ol.milestone[class *= "grid"] {
		height: calc( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 1.5rem );
		padding-right: 2rem;
	}
	ol.milestone[class *= "grid"] > li {
		display: grid;
		place-items: center; 
		margin-right: -2rem;
	}
	ol.milestone[class *= "grid"] > li .tile {
		clip-path: polygon( 0 0, calc(100% - 3rem) 0, 100% 50%, calc(100% - 3rem) 100%, 0 100%, 3rem 50% );
	}
	ol.milestone[class *= "grid"] > li:first-child .tile {
		clip-path: polygon( 0 0, calc(100% - 3rem) 0, 100% 50%, calc(100% - 3rem) 100%, 0 100% );
		border-radius: .5rem 0 0 .5rem;
	}
	ol.milestone[class *= "grid"] > li:last-child .tile {
		clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, 3rem 50% );
		border-radius: 0 .5rem .5rem 0;
	}
	ol.milestone[class *= "grid"] > li .ellipse {
		top: 1.5rem;
		left: calc( ( 100% - 5rem - 1rem * 2 ) / 2 + .75rem );
	}
	ol.milestone[class *= "grid"] > li .notes:has( br:nth-of-type(2) ) {
		margin-top: 1.5rem;
	}
	ol.milestone[class *= "grid"] > li .notes:has( br:nth-of-type(3) ) {
		margin-top: 2rem;
	}
}
@media print, screen and (max-width: 768px) {
	
	.outer__contents__area:has( ol.milestone.grid3 ) {
		margin-top: calc( ( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem ) * ( 3 / 2 ) ) );
	}
	.outer__contents__area ol.milestone.grid3 {
		top: calc( -1 * ( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem ) * ( 3 / 2 ) ) + 2.5rem );
	}
	.outer__contents__area ol.milestone.grid3 + * {
		margin-top: calc( -1 * ( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem ) * ( 3 / 2 ) ) + 3.5rem );
	}
	
	.outer__contents__area:has( ol.milestone.grid4 ) {
		margin-top: calc( ( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem ) * ( 4 / 2 ) ) + 10px );
	}
	.outer__contents__area ol.milestone.grid4 {
		top: calc( -1 * ( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem ) * ( 4 / 2 ) ) + 1.5rem );
	}
	.outer__contents__area ol.milestone.grid4 + * {
		margin-top: calc( -1 * ( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem ) * ( 4 / 2 ) ) + 2.5rem );
	}
	
	.outer__contents__area:has( ol.milestone.grid5 ) {
		margin-top: calc( ( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem ) * ( 5 / 2 ) ) - 3rem );
	}
	.outer__contents__area ol.milestone.grid5 {
		top: calc( -1 * ( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem ) * ( 5 / 2 ) ) + 5rem );
	}
	.outer__contents__area ol.milestone.grid5 + * {
		margin-top: calc( -1 * ( ( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem ) * ( 5 / 2 ) ) + 6rem );
	}
	
	ol.milestone[class *= "grid"] {
		padding-top: 2rem;
	}
	ol.milestone[class *= "grid"] > li {
		height: calc( 1.5rem + 1rem + 1.75rem + 3rem * 1.5 * 1.5 + 3rem );
		margin-top: -2rem;
	}
	ol.milestone[class *= "grid"] > li .tile {
		clip-path: polygon( 0 0, 50% 3rem, 100% 0, 100% calc(100% - 3rem), 50% 100%, 0 calc(100% - 3rem) );
	}
	ol.milestone[class *= "grid"] > li:first-child .tile {
		clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 3rem), 50% 100%, 0 calc(100% - 3rem) );
		border-radius: .5rem .5rem 0 0;
	}
	ol.milestone[class *= "grid"] > li:last-child .tile {
		clip-path: polygon( 0 0, 50% 3rem, 100% 0, 100% 100%, 0 100% );
		border-radius: 0 0 .5rem .5rem;
	}
	ol.milestone[class *= "grid"] > li:last-child > *:last-child {
		margin-bottom: 2.5rem;
	}
	ol.milestone[class *= "grid"] > li .ellipse {
		top: calc( 3rem + 1.5rem );
		left: calc( ( 100% - 5rem - 1rem * 2 ) / 2 + 1rem );
	}
	ol.milestone[class *= "grid"] > li:first-child .ellipse {
		top: 3rem;
	}
	ol.milestone[class *= "grid"] > li .notes {
		padding-top: 1.5rem;
	}
	ol.milestone[class *= "grid"] > li .notes:has( br:not([class]):only-of-type ) {
		padding-top: 3.5rem;
	}
	ol.milestone[class *= "grid"] > li .notes:has( br:nth-of-type(2) ) {
		padding-top: 3rem;
	}
	ol.milestone[class *= "grid"] > li .notes:has( br:nth-of-type(3) ) {
		padding-top: 5rem;
	}
	ol.milestone[class *= "grid"] > li:first-child .notes {
		padding-top: 0 !important;
	}
	ol.milestone[class *= "grid"] > li:first-child .notes:has( br.pc-only:only-of-type ) {
		padding-top: 0 !important;
		margin-top: -1.5rem !important;
	}
	ol.milestone[class *= "grid"] > li:last-child .notes {
		padding-top: 1.5rem !important;
	}
	ol.milestone[class *= "grid"] > li:last-child .notes:has( br:not([class]):only-of-type ) {
		padding-top: 3.5rem !important;
	}
}

.steps,
.steps dl.step-box,
.steps dl.step-box dt > .tag {
    position: relative;
}
.steps dl.step-box {
    margin-bottom: 30px;
	z-index: 1;
}
.steps dl.step-box dt > * {
	font-size: 1.5rem;
    padding: .5rem 1.2rem;
}
.steps dl.step-box dt > .tag {
	height: 3rem;
	top: -2px;
	left: -2px;
}
.steps dl.step-box dt > .tag [class *= "opacity-"] {
	width: 100%;
	height: 100%;
	clip-path: polygon( 0 0, 100% 0, 0 100% );
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.steps dl.step-box dt > .tag [class *= "bgc-"]:last-child {
	width: 100% !important;
	height: 100%;
	clip-path: polygon( 0 0, 100% 0, 50% 1rem, 0 0 );
	position: absolute;
	top: 100%;
	left: 0;
}
.steps dl.step-box dt > .tag + h3 {
	margin-top: .33rem;
}
.steps .bar {
	width: 5px;
	height: 100%;
	position: absolute;
	left: calc( ( 100% - 5px ) / 2 );
}
@media print, screen and (max-width: 768px) {
	
	.steps dl.step-box dt > .tag {
		width: auto !important;
	}
	.steps dl.step-box dt > .tag + h3 {
		padding-top: .5rem;
		padding-left: 0;
	}
}

p > span > img {
    width: 25px;
    display: inline;
    margin-right: 7px;
}

.slide_contents {
    display: none;
}
.slide_label {
    cursor: pointer;
	padding-right: calc( 1em + 1.5rem );
}
.slide_label:hover {
  opacity: 0.6;
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.slide_label > span {
	background: rgb(255, 255, 255);
	width: 1em;
	height: 2px;
	position: absolute;
	top: calc( (100% - 1em) / 2 );
	right: 1em;
	-moz-transition: all .25s ease-out; /* Firefox */
	-webkit-transition: all .25s ease-out; /* GoogleChrome, Safari */ 
	-o-transition: all .25s ease-out; /* Opera */ 
	-ms-transition: all .25s ease-out; /* IE */ 
	transition: all .25s ease-out; 
	margin-top: .33em;
}
.slide_label > span:nth-of-type(1) {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.slide_label > span:nth-of-type(2) {
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}
.slide_label.opened > span:nth-of-type(1){
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.slide_label.opened > span:nth-of-type(2) {
	display: none;
}

.positioning .cycle {
    padding: 25px 0 35px;
}
@media screen and (max-width: 768px) {
    .positioning .cycle {
        padding-bottom: 15px;
    }
}
.positioning .flex {
    align-items: normal;
}
.positioning .cycle > ol.flex {
    margin-left: 20px;
}
.positioning .cycle .waypoint {
	border-radius: .8rem;
}
@media screen and (min-width: 769px) {
    .positioning .cycle ol.flex > li > ul,
    .positioning .cycle ol.flex > li > ul > li,
    .positioning .cycle ol.flex:has( > [class *= "post"] ) {
        height: 100%;
    }

	.positioning .cycle .waypoint {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
    .positioning .cycle .post2-3 .waypoint ul.flex {
        justify-content: space-between;
    }
    .positioning .cycle .post2-3 .waypoint ul.flex > li {
        width: calc( 50% - .5rem );
    }
}
@media screen and (max-width: 768px) {
    .positioning .cycle li.bibs,
    .positioning .cycle .waypoint ul.flex > * {
        width: 100% !important;
    }
    .positioning .cycle ol.flex > li {
        margin-top: -25px;
    }
    .positioning .cycle > ol.flex {
        margin-left: 1rem;
    }
    .positioning .cycle > ol.flex > li {
        width: 100% !important;
        padding-right: 10%;
    }
    .positioning .cycle > ol.flex > li:has( li.post2-3 ) {
        padding-top: 50px;
    }
	
    .positioning .cycle .post2-3 .waypoint {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .positioning .cycle .step .tri-B {
        max-width: 100px;
        height: 2rem;
    }
}

.positioning .cycle li[class *= "post"] {
    width: calc( ( 1280px - 20px * 2 - 20px ) / 4 );
    position: relative;
}
@media screen and (max-width: 1279px) and (min-width: 769px) {
    .positioning .cycle li[class *= "post"] {
        width: calc( ( 100vw - 20px * 2 - 20px ) / 4 );
    }
}
@media screen and (max-width: 768px) {
    .positioning .cycle li[class *= "post"] {
        width: 100%;
    }
}

.positioning .cycle .waypoint {
    margin-top: calc( -1 * ( 2em * 1.5 + 10px * 2 ) / 2 );
    padding: 1rem;
}
@media screen and (min-width: 769px) {
    .positioning .cycle .waypoint {
        height: calc( 100% - ( ( 2em * 1.5 + 10px * 2 ) / 2 ) - 75px );
        margin-right: 20px;
    }
}
@media screen and (max-width: 768px) {
    .positioning .cycle div.bibs + .waypoint {
        position: relative;
        top: -20px;
    }
    .positioning .cycle .post2-3 .waypoint {
        margin-top: calc( -1 * ( 2em * 1.5 + 10px * 2 ) / 2 + 10px - 50px );
    }
}

.positioning .cycle .waypoint [class *= "title__ico-"] {
    width: 1.5rem;
    left: calc( ( 100% - ( 1.5rem * 1.5 ) ) / 2 );
    top: -1rem;
    margin-bottom: 0;
}

.positioning .cycle .waypoint h3 {
    font-size: 1.75rem;
    margin-top: 35px;
}
@media screen and (max-width: 768px) {
    .positioning .cycle .waypoint h3 {
        margin: .5rem 0;
    }
    .positioning .cycle div.bibs + .waypoint h3 {
        margin-top: 20px;
    }
}
.positioning .cycle .waypoint h4 {
    font-size: 1.5rem;
    margin-top: -1.75rem;
}

.positioning .cycle .waypoint dl[class *= "bgc-"] {
    padding: 0 10px 1rem;
}

.positioning .cycle ul.term {
    margin-left: calc( 3rem + .25rem );
}
.positioning .cycle ul.term li + li {
    margin-top: .5rem;
}
.positioning .cycle ul.term li .ellipse {
    width: 3rem;
    text-align: center;
    padding: 0;
    margin-left: calc( -1 * ( 3rem + .25rem ) );
    margin-right: .25rem;
}

.positioning .cycle [class *= "arrow-"] {
    position: absolute;
    top: 0;
}
.positioning .cycle .arrow-start {
    width: 1rem;
    height: calc( 25px + 50px );
    left: calc( ( 100% / 2 ) - 1rem - 1px );
}
.positioning .cycle .arrow-end {
    width: 1rem;
    height: calc( 25px + 50px - 20px );
    left: calc( 100% / 2 );
}
.positioning .cycle .arrow-end > div {
    width: 30px;
    height: 20px;
    clip-path: polygon( 0% 0%, 50% 100%, 100% 0% );
    position: absolute;
    left: calc( ( 100% - 30px ) / 2 );
    bottom: -20px;
}
.positioning .cycle .arrow-middle {
    width: 100%;
    height: 1rem;
    left: 25%;
}
@media screen and (max-width: 768px) {
    .positioning .cycle .arrow-start {
        width: calc( 10% - .5rem );
        height: 1rem;
        top: calc( 50px + 20px - .5rem / 2 );
        left: 100%;
    }
    .positioning .cycle .arrow-end {
        width: 1.5rem;
        height: 1rem;
        top: calc( 50px + .5rem + 10px );
        left: calc( 100% + 1.5rem );
    }
    .positioning .cycle .arrow-end > div {
        left: -1.5rem;
        bottom: -2px;
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
    .positioning .cycle .arrow-middle {
        width: 1rem;
        height: calc( 100% + 1rem - 2px + 25px );
        top: calc( 10px + .5rem );
        left: calc( 100% + 10% - 1.5rem );
    }
}
@media screen and (max-width: 480px) {
    .positioning .cycle .arrow-start {
        width: 10%;
        height: .66rem;
        top: calc( 50px + 20px - .5rem / 2 + 2px );
    }
    .positioning .cycle .arrow-end {
        width: 7.5%;
        height: .66rem;
        left: calc( 100% + ( 10% - 7.5% ) );
    }
    .positioning .cycle .arrow-end > div {
        width: 18px;
        height: 12px;
        left: -10px;
        bottom: -1px;
    }
    .positioning .cycle .arrow-middle {
        width: .66rem;
        height: calc( 100% + 25px + .66rem );
        left: calc( 100% + 10% - .66rem );
    }
}

.positioning .cycle .bibs {
    height: calc( 25px + 50px + ( 2em * 1.5 + 10px * 2 ) );
    position: relative;
    bottom: 0;
    padding-top: 25px;
}
@media screen and (max-width: 768px) {
    .positioning .cycle .bibs {
        padding-top: 0;
    }
}

.positioning .cycle .bibs .process {
    height: calc( 2em * 1.5 + 10px * 2 );
    position: relative;
    padding-bottom: 10px;
    padding-top: calc( ( ( 2em * 1.5 + 10px * 2 ) - ( 1em * 1.5 ) ) / 2 );
    clip-path: polygon( 0% 0%, calc( 100% - 20px ) 0%, 100% 50%, calc( 100% - 20px ) 100%, 0% 100% );
}
.positioning h2.process {
	font-size: 18px !important;
}
.positioning .cycle .bibs .process:has( br ) {
    padding-top: 10px;
}
@media screen and (max-width: 1023px) and (min-width: 769px) {
	.positioning .cycle .bibs .process {
		height: calc( 3em * 1.5 + 20px * 2 );
		padding-top: calc( ( ( 3em * 1.5 + 20px * 2 ) - ( 1em * 1.5 ) ) / 2 );
	}
	.positioning .cycle .bibs .process br.invisible {
		display: block;
	}
	.positioning .cycle .bibs .process:has( br ) {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.positioning .cycle .waypoint {
		margin-top: -.5rem;
	}
	.positioning .cycle .waypoint h3 {
		margin-top: 50px;
	}
}
@media screen and (min-width: 769px) {
    .positioning .cycle li:not( .post1 ) > div.bibs .process {
        clip-path: none !important;
        margin-right: 20px;
    }
}
@media screen and (max-width: 768px) {
    .positioning .cycle .bibs .process {
        height: auto;
        padding-top: 20px !important;
        padding-bottom: 20px;
    }
    .positioning .cycle div.bibs .process {
        clip-path: none !important;
        z-index: 1;
    }
    .positioning .cycle li.bibs {
		position: relative;
        top: -50px;
    }
    .positioning .cycle .post2-3 ol:has( li.bibs ) {
        background-color: #fff;
        background-clip: content-box;
        border-style: solid;
        border-top-width: 25px;
        border-bottom: none;
    }
    .positioning .cycle li.bibs:not(:last-of-type) .process {
        clip-path: polygon( 0% 0%, 100% 0%, 100% calc( 100% - 30px ), 50% 100%, 0% calc( 100% - 30px ) );
        padding-bottom: 30px;
    }
    .positioning .cycle li.bibs + li.bibs .process {
        clip-path: polygon( 0% 0%, 50% 30px, 100% 0%, 100% 100%, 0% 100% );
        padding-top: 40px !important;
        margin-top: -1rem;
    }
    .positioning .cycle li.bibs + li.bibs .num {
        top: 30px;
    }
}
@media screen and (max-width: 480px) {
    .positioning .cycle li.bibs + li.bibs .num {
        top: 32px;
    }
}

.positioning .num {
    width: 50px;
    height: 50px;
    line-height: 45px;
    font-weight: 600;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: calc( 50px / 2 );
    z-index: 2;
    margin-top: 0;
    margin-bottom: 0;
}

.positioning > [class *= "post"] > * {
    position: relative;
    top: -20px;
    margin-left: auto !important;
}
.positioning > [class *= "post"] .num {
    margin-top: -20px;
}
.positioning > [class *= "post"] ul.flex {
    align-items: flex-end;
}
.positioning > [class *= "post"] ul.flex > li {
    margin: 0 !important;
}
.positioning > [class *= "post"] .process {
    margin-bottom: 2rem;
}
.positioning > [class *= "post"] .process > span {
    min-width: 10em;
    max-width: 100%;
    display: inline-block;
    padding: .5rem;
}
@media screen and (max-width: 768px) {
    .positioning > [class *= "post"] ul.flex li:has( figure ) {
        width: 20% !important;
        margin-top: 0 !important;
    }
    .positioning > [class *= "post"] ul.flex li:has( [class *= "process" ] ) {
        width: auto !important;
        margin-top: 0 !important;
    }
}
@media screen and (max-width: 480px) {
    .positioning > [class *= "post"] .process {
        top: auto;
        margin-bottom: 1rem;
    }
    .positioning > [class *= "post"] .process > span {
        width: 90%;
        min-width: auto;
    }
}