@charset "UTF-8";

/* ---------- BACKGROUND COLOR ---------- */
.bg__gradation--bluegreen {
    background: -moz-linear-gradient( 180deg, rgb(75,207,190) 0%, rgb(0,147,196) 100%);
    background: -webkit-linear-gradient( 180deg, rgb(75,207,190) 0%, rgb(0,147,196) 100%);
    background: -ms-linear-gradient( 180deg, rgb(75,207,190) 0%, rgb(0,147,196) 100%);
}
.bg__gray { background: #e5e5e5; }


/* ---------- CONTENTS ---------- */
.page__kv > img, main figure > img { width: 100%; height: auto; vertical-align: top; }

/* title */
span.content-title__main-title {
    font-family: "Oswald", sans-serif;
    font-weight: 100;
    color: #0092c4;
    line-height: 1;
}
span.content-title__main-title > span.min { font-size: 80%; }
span.content-title__sub-title {
    font-weight: 100;
    color: #fff;
    line-height: 1;
    background: -moz-linear-gradient( 180deg, #4bcfbd 0%, #0093c4 77%);
    background: -webkit-linear-gradient( 180deg, #4bcfbd 0%, #0093c4 77%);
    background: -ms-linear-gradient( 180deg, #4bcfbd 0%, #0093c4 77%);
    display: block;
    padding: 12px 24px;
    margin-top: -16px;
    max-width: 720px;
}

.title__border {
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 6.4rem;
}
/*.title__border::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: #000;
    margin-top: 24px;
}*/
/* color change */
.title__border--blue { color: #0093c4; }
/*.title__border--blue::after { background: #0093c4; }*/
.title__border--green { color: #01b352; }
/*.title__border--green::after { background: #01b352; }*/
.title__border--orange { color: #de7a52; }
/*.title__border--orange::after { background: #de7a52; }*/

.title__blue { color: #0093c4; }
.title__blue > span { color: #333; font-weight: normal; }

.page-content__title {
    border-bottom: 1px solid #0093c4;
    text-align: center;
}
.page-content__title span.page-content__main-title {
    line-height: 1.5;
    letter-spacing: 0.4rem;
    color: #0093c4;
}
.page-content__title span.page-content__sub-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 100;
    line-height: 1.5;
    letter-spacing: 0.4rem;
    color: #999;
}

.title__obi {
    background: #0093c4;
    color: #fff;
    padding: 6px 12px;
    margin-bottom: 24px;
}

.title__arrow::before {
    content: '〉';
    display: inline-block;
    color: #0093c4;
    margin-right: 6px;
    margin-bottom: 10px;
}


/* ---------- BUTTON ---------- */
ul.btn__basic { display: flex; flex-wrap: wrap; }
@media screen and (min-width: 769px), print {
  ul.btn__basic li { min-width: 180px; }
}
.btn__basic a,
a.btn__basic {
    background-color: #fff;
    border-radius: 21px;
    font-size: 1.4rem;
    display: inline-block;
    color: #000;
    padding: 10px 14px;
    position: relative;
}
.btn__basic a { width: 100%; }
a.btn__basic { min-width: 180px!important; }
.btn__basic a::after,
a.btn__basic::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 8px;
    background: url('../img/common/arrow.svg') center center no-repeat;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: ease right 0.2s;
}
.btn__basic a:hover::after,
a.btn__basic:hover::after { right: 6px; }

/* color change - black */
.btn__basic--bk a,
a.btn__basic--bk { 
    color: #fff; 
    background-color: #000;
}

/* color change - white-border */
.btn__basic--wh-br a,
a.btn__basic--wh-br {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    padding-right: 48px;
}
.btn__basic--bk a::after,
a.btn__basic--bk::after,
.btn__basic--wh-br a::after,
a.btn__basic--wh-br::after {
    background-image: url('../img/common/arrow-wh.svg');
}

/* color change - gray */
.btn__basic--gray a,
a.btn__basic--gray { background-color: #e5e5e5; }

/* color change - blue */
.btn__basic--blue a,
a.btn__basic--blue {
    background: #00fff0;
    color: #000;
    border: 1px solid #fff;
    padding-left: 3.2rem;
    padding-right: 3.2rem;
}

/* border button */
a.btn__border {
    display: inline-block;
    border: 1px solid #a0a0a0;
    padding: 16px 48px;
    text-align: center;
    position: relative;
    color: #000;
}
a.btn__border::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 8px;
    background: url('../img/common/arrow.svg') center center no-repeat;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: ease right 0.2s;
}
a.btn__border:hover::after { right: 6px; }
/* color change */
.text--green { color: #01b352!important; }
.text--orange { color: #de7a52!important; }
.text--blue { color: #0093c4!important; }
.text--purple { color: #7a609a!important; }

.links__btn {
    display: flex;
    flex-wrap: wrap;
}
.links__btn li { border: 1px solid #a0a0a0; background: #fff; }
.links__btn li a {
    display: block;
    font-size: 1.4rem;
    color: #000;
    text-align: center;
    height: 100%;
}
.links__btn li a span {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    padding: 12px 12px 24px 12px;
}
.links__btn li a span::after {
    content: '〉';
    color: #a0a0a0;
    font-weight: bold;
    transform: rotate(90deg);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: ease 0.3s;
}
.links__btn li:hover a span::after { bottom: -2px; }

.bg--purple { background: #7a609a; }
.bg--orange { background: #f79646; }
.bg--lime { background: #81a636; }
.bg--brown { background: #c0504d; }

/* ---------- OTHER ---------- */
.clear::after { content: ''; display: block; clear: both; }


/* ---------- ANIMATION ---------- */
@keyframes SlideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.slide-in-left { animation: SlideInLeft 1.5s ease; }

@keyframes SlideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.slide-in-right { animation: SlideInRight 1.5s ease; }

@keyframes scaleUp {
    0% { transform: scale(0%); }
    100% { transform: scale(100%); }
}
.scaleUp { animation: scaleUp 1s ease; }

/* delay */
.delay01 { animation-delay: 0.2s; }
.delay02 { animation-delay: 0.5s; }
.delay03 { animation-delay: 0.7s; }


/* ---------- TABLE ---------- */
table.table__line { width: 100%; table-layout: fixed; border-collapse: collapse; }
table.table__line tr th,
table.table__line tr td { padding: 24px 12px; }
table.table__line tr th {
    color: #0093c4;
    border-top: 1px solid #0093c4;
    text-align: left;
    vertical-align: top;
    width: 20%;
}
table.table__line tr:last-child th { border-bottom: 1px solid #0093c4; }
table.table__line tr td { border-top: 1px solid #bfbfbf; }
table.table__line tr:last-child td { border-bottom: 1px solid #bfbfbf; }

/* ---------- TEXT ---------- */
span.text--border { text-decoration: underline; }
span.small { font-size: 80%; }

@media screen and (min-width: 769px), print {
    .page-content__title {
        margin-bottom: 6rem;
        padding-bottom: 4.8rem;
    }
    .page-content__title span.page-content__main-title { font-size: 4.8rem; }
    
    /* title */
    span.content-title__main-title { font-size: 15rem; }
    span.content-title__sub-title { font-size: 70%; }
    
    /* ---------- BUTTON ---------- */
    ul.btn__basic { column-gap: 20px; row-gap: 10px; }
    .links__btn li { width: 20%; }
    .links__btn.col4 li { width: 25%; }
    
    /* ---------- TABLE ---------- */
    table.table__line tr:last-child td { width: 80%; }
    table.table__line tr th { width: 20%; }
}
@media screen and (max-width: 768px) {
    .page-content__title {
        margin-bottom: 3rem;
        padding-bottom: 2.4rem;
    }
    .page-content__title span.page-content__main-title { font-size: calc(3.2rem + ((1vw - 7.68px) * 0.6944)); }
    .page-content__title span.page-content__sub-title { font-size: calc(2.6rem + ((1vw - 7.68px) * 0.6944)); }
    
    /* title */
    span.content-title__main-title { font-size: 8rem; }
    span.content-title__sub-title { font-size: 55%; }
    .about-us__readtext { text-shadow: 1px 1px 1px rgb(0 0 0 / 30%); }
    .title__border { font-size: calc(2.8rem + ((1vw - 7.68px) * 0.6944)); margin-bottom: calc(4.8rem + ((1vw - 7.68px) * 0.6944));; }
    
    /* ---------- BUTTON ---------- */
    ul.btn__basic { flex-wrap: wrap; }
  ul.btn__basic li { width: 48%; }
    ul.btn__basic li:not(:last-child) { margin-bottom: 2%; margin-right: 2%; }
    
    .btn__basic a, a.btn__basic { font-size: calc(1.5rem + ((1vw - 7.68px) * 0.6944)); }
    .btn__basic a::after, a.btn__basic::after { width: 20px; height: 6px; }
    .links__btn li { width: 100%; }
    .links__btn li:not(:last-child) { border-bottom: none; }
    .links__btn li a { font-size: calc(1.6rem + ((1vw - 7.68px) * 0.6944)); }
    
    /* ---------- TABLE ---------- */
    table.table__line tr { display: flex; flex-wrap: wrap; }
    table.table__line tr:last-child th { border-bottom: none; }
    table.table__line tr th,
    table.table__line tr td { width: 100%; }
    
    .table__box { overflow-x: scroll; border: 1px solid #ccc; padding: 2rem; }
    .table__box::-webkit-scrollbar {
		height: 6px;
	}
	.table__box::-webkit-scrollbar-track {
		background-color: rgba(255, 255, 255, 1);
	}
	.table__box::-webkit-scrollbar-thumb {
		background-color: #eee;
		width: 6px;
	}
    .table__box table.table__line { min-width: 680px; width: 100%; white-space: nowrap; }
    .table__box table.table__line tr { display: table-row; }
    
    /* --------- TEXT ALIGN ---------- */
    .sp_left { text-align: left; }
}