@charset "utf-8";

/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/

/* areaIntro */
.areaIntro {
    margin-bottom: 135px;
}
.areaIntro .introPhoto {
    margin-bottom: -69px;
}
.areaIntro .introPhoto img {
    width: 100%;
}
.areaIntro .introSub {
    font-size: 32px;
    text-align: center;
    line-height: 1.75;
}
.areaIntro .introSub:not(:last-child) {
    margin-bottom: 57px;
}
/* areaIntro */

/* areaKey */
.areaKey {
    text-align: center;
    background: url("../images/index/area-key-photo-bg.png") no-repeat center center/ cover;
    padding-top: 82px;
}
.areaKey .keyIntro {
    display: inline-block;
    width: 53%;
    margin-bottom: 15px;
}
.areaKey .keyList {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 60px);
    max-width: 996px;
    margin: 0 auto -8px;
}
.areaKey .keyList li {
    width: 19.8%;
    margin-right: 2.4%;
    margin-left: 1.3%;
}
.areaKey .keyList li:nth-child(2) {
    width: 19.9%;
    margin-right: 3.9%;
    margin-top: 1.5%;
}
.areaKey .keyList li:nth-child(3) {
    width: 19.9%;
    margin-right: 3.1%;
    margin-top: 3.1%;
}
.areaKey .keyList li:nth-child(4) {
    width: 17.7%;
    margin-top: 4.4%;
}
.areaKey .keyList li a {
    display: block;
    transition: all .3s;
}
.areaKey .keyPeople {
    width: calc(100% - 60px);
    max-width: 1060px;
    margin: 0 auto;
}
/* areaKey */


/* areaMoney */
.areaMoney {
    background: #ffce78;
    padding: 33px 0 67px;
}
.areaMoney .areaTitle {
    margin-bottom: 76px;
}
/* areaMoney */

/* areaCite */
.areaCite .citeWrap .citeQuest {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 76px;
}
.areaCite .citeWrap .citeQuest .questQ {
    width: 59px;
    margin-top: 22px;
    margin-right: 47px;
    margin-left: 10px;
}
.areaCite .citeWrap .citeQuest .questSub {
    position: relative;
    width: calc(100% - 116px);
    font-size: 35px;
    background: #fff;
    border-radius: 30px;
    padding: 23px 43px;
    line-height: 1.75;
}
.areaCite .citeWrap .citeQuest .questSub::before {
    content: "";
    position: absolute;
    top: 36px;
    left: -26px;
    width: 43px;
    height: 50px;
    background: url("../images/index/area-cite-triangle.svg") no-repeat center center/ 100%;
}
.areaCite .citeWrap .citePie {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 4px;
    margin-bottom: 96px;
}
.areaCite .citeWrap .citePie .pieChart {
    width: 48.6%;
}
.areaCite .citeWrap .citePie .pieChart .chartSub {
    font-size: 20px;
    margin-top: 10px;
    padding: 0 30px;
}
.areaCite .citeWrap .citeNote {
    text-align: center;
    margin-bottom: 41px;
}
.areaCite .citeWrap .citeNote .note {
    position: relative;
    display: inline-block;
    font-size: 32px;
    padding: 0 20px;
}
.areaCite .citeWrap .citeNote .note::before,
.areaCite .citeWrap .citeNote .note::after {
    content: "";
    position: absolute;
    top: 58%;
    left: -14px;
    transform: translateY(-50%) rotate(-22deg);
    width: 3px;
    height: 177%;
    background: #4c3211;
}
.areaCite .citeWrap .citeNote .note::after {
    left: auto;
    right: -14px;
    transform: translateY(-50%) rotate(22deg);
}
.areaCite .citeWrap .citeSub {
    display: block;
    width: calc(100% - 60px);
    max-width: 1000px;
    margin: 0 auto;
    font-size: 26px;
    line-height: 1.75;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.8);
    padding: 27px 44px 45px;
}
.areaCite .citeTable {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
    margin-bottom: 27px;
}
.areaCite .citeTable .tableWrap{
    margin-left: calc((100% - 1000px)/2);
    margin-right: 60px;
}
.areaCite .citeTable .tableWrap table {
    display: block;;
    width: max-content;
    padding-right: 60px;
}
.areaCite .citeTable .tableWrap table th {
    font-size: 41px;
    text-align: left;
    padding: 21px 10px;
}
.areaCite .citeTable .tableWrap table th:nth-child(2){
    min-width: 481px;
}
.areaCite .citeTable .tableWrap table th:nth-child(3) {
    min-width: 396px;
}
.areaCite .citeTable .tableWrap table td {
    font-size: 34px;
    padding: 5px 16px 5px 10px;
    line-height: 1.35;
}
.areaCite .citeTable .tableWrap table td:first-child {
    padding-bottom: 22px;
}
.areaCite .citeTable .tableWrap table td img {
    height: 135px;
}
.areaCite .citeTable .tableNote {
    font-size: 20px;
    margin-top: 40px;
    margin-left: 443px;
}
/* areaCite */

/* areaIkigai */
.areaIkigai {
    background: #ffbf80;
    padding: 100px 0 113px;
}
.areaIkigai .areaTitle {
    margin-bottom: 68px;
}
.areaIkigai .citeWrap .citeNote {
    margin-bottom: 80px;
}
.areaIkigai .citeWrap .ikigaiSub {
    text-align: center;
    font-size: 32px;
    line-height: 1.75;
    margin-bottom: 116px;
}
.areaIkigai .citeWrap .citeQuest {
    margin-bottom: 55px;
}
.areaIkigai .citeWrap:first-child .citeQuest {
    margin-bottom: 75px;
}
/* areaIkigai */

/* areaLife */
.areaLife {
    background: #1bb299;
    padding: 52px 0 88px;
}
.areaLife .areaTitle {
    margin-bottom: 87px;
}
.areaLife .citeWrap:not(:last-child) {
    margin-bottom: 63px;
}
.areaLife .citeTable .tableWrap table td {
    font-size: 32px;
    color: #fff;
    padding: 5px 0;
}
.areaLife .citeTable .tableWrap table td:first-child {
    padding: 0 14px 18px 0;
}
.areaLife .citeTable .tableWrap table td.citeBox {
    width: 428px;
    padding: 0 14px 18px 5px;
}
.areaLife .citeTable .tableWrap table td.citeBox .placeName {
    display: inline-block;
    vertical-align: middle;
    font-size: 47px;
    margin-right: 11px;
}
.areaLife .citeTable .tableWrap table td.citeBox .placeBig {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 132px);
    font-size: 63px;
    font-weight: bold;
    margin-top: -4px;
    line-height: 1;
}
.areaLife .citeTable .tableWrap table td.citeBox .placeBig .fs17 {
    display: block;
    font-size: 17px;
    line-height: 1.7;
    margin-top: 8px;
    transform: translateY(7px);
}
.areaLife .citeThink .citeTable {
    margin-bottom: 86px;
}
.areaLife .citeWrap .citeTable::-webkit-scrollbar-track{
    background: #148878; 
}
.areaLife .citeWrap .citeTable::-webkit-scrollbar-thumb {
    background: #8ed7cb; 
}
.areaLife .citeThink .citeTable .tableWrap table td.citeBox {
    width: 570px;
    padding-bottom: 28px;
}
.areaLife .citeThink .citeTable .tableWrap table tr:not(:nth-child(1),:nth-child(2),:nth-child(3)) td img {
    height: 78px;
}
.areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeName.fs33 {
    width: 100px;
    text-align: right;
    font-size: 36px;
    margin-right: 24px;
    vertical-align: text-top;
}
.areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeName.fs33 .fs32 {
    font-size: 32px;
}
.areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeBig {
    line-height: 1.2;
    margin-top: 12px;
}
.areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeBig .fs42 {
    display: block;
    font-size: 42px;
}
.areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeBig .fs26 {
    display: block;
    font-size: 28px;
}
.areaLife .citeThink .citeTable .tableWrap table tr:not(:nth-child(1),:nth-child(2),:nth-child(3)) td.citeBox {
    padding-bottom: 9px;
}
.areaLife .citeThink .citeTable .tableWrap table tr:not(:nth-child(1),:nth-child(2),:nth-child(3)) td.citeBox .placeBig {
    margin-top: 0px;
    line-height: 1.1;
    vertical-align: text-top;
    transform: translateY(11px);
}
.areaLife .citeWrap .citeNote {
    margin-bottom: 90px;
}
.areaLife .citeWrap .citeNote .note {
    color: #fff;
}
.areaLife .citeWrap .citeNote .note::before, .areaLife .citeWrap .citeNote .note::after {
    background: #fff;
}
.areaLife .citeWrap .thinkSub {
    text-align: center;
    font-size: 32px;
    color: #fff;
    line-height: 1.75;
    margin-bottom: 72px;
}
/* areaLife */

/* areaSummary */
.areaSummary {
    background: #009aaf;
    padding: 53px 60px 101px;
    margin-bottom: 93px;
}
.areaSummary .areaTitle {
    margin-bottom: 51px;
}
.areaSummary .summarySub {
    position: relative;
    text-align: center;
    font-size: 32px;
    color: #fff;
    line-height: 1.75;
    margin-bottom: 185px;
}
.areaSummary .summarySub .line {
    position: relative;
}
.areaSummary .summarySub .line::before {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 7px;
    background: #ff8080;
}
.areaSummary .areaBtn {
    position: relative;
}
.areaSummary .areaBtn::before {
    content: "";
    position: absolute;
    top: -106px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 36px solid transparent;
    border-right: 36px solid transparent;
    border-top: 37px solid #fff;
}
/* areaSummary */

/* areaSurvey */
.areaSurvey {
    margin-bottom: 186px;
}
.areaSurvey .areaTitle {
    margin-bottom: 46px;
}
.areaSurvey .surveyTable {
    width: 99.1%;
    margin: 0 auto;
}
.areaSurvey .surveyTable table {
    border-collapse: collapse;
}
.areaSurvey .surveyTable th,
.areaSurvey .surveyTable td {
    border: 2px solid #4c3211;
    text-align: left;
}
.areaSurvey .surveyTable th {
    width: 231px;
    font-size: 22px;
    background-color: #ffe2c2;
    padding: 39px 10px 40px 20px;
}
.areaSurvey .surveyTable td {
    font-size: 20px;
    font-weight: 500;
    padding: 5px 12px 12px;
    line-height: 1.7;
}
.areaSurvey .surveyTable td strong {
    font-weight: 900;
}
/* areaSurvey */

/* GRAPH ANIMATION */
.graphAnimation {
    position: relative;
    opacity: 0;
}
.graphAnimation.animated {
    opacity: 1
}
.graphAnimation .mask {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.graphAnimation .mask p {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden
}
.graphAnimation .mask p::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffce78;
    transition: transform .3s;
    transform-origin: 0 center;
    transform: rotate(0deg)
}
.areaIkigai .mask p::after {
    background-color: #ffbf80
}
.graphAnimation .mask p:nth-of-type(1) {
    transform: rotate(180deg)
}
.graphAnimation .mask p:nth-of-type(1)::after {
    transition-delay: .3s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
.graphAnimation .mask p:nth-of-type(2) {
    width: calc(50% + 2px);
    left: calc(50% - 2px)
}
.graphAnimation .mask p:nth-of-type(2)::after {
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
.graphAnimation.animated .mask p::after {
    transform: rotate(180deg)
}

@media(max-width: 1750px){
    .areaCite .citeTable .tableWrap {
        width: max-content;
    }
}
@media(max-width: 1200px)  and (min-width: 769px){
    .areaIntro {
        margin-top: 50px;
    }
}
@media(max-width: 1060px)  and (min-width: 769px){
    .areaIntro {
        margin-top: 70px;
    }
    .areaCite .citeTable .tableWrap {
        margin-left: 30px;
    }
    .areaCite .citeTable .tableWrap table {
        padding-right: 30px;
    }
    .areaCite .citeWrap .citePie .pieChart .chartSub {
        font-size: 18px;
        padding: 0 10px;
    }

    .areaCite .citeTable .tableNote {
        font-size: 18px;
    }
}
@media(max-width: 900px)  and (min-width: 769px){
    .areaCite .citeWrap .citePie .pieChart .chartSub {
        font-size: 16px;
        padding: 0;
    }

    .areaCite .citeTable .tableNote {
        font-size: 16px;
    }
}

@media(min-width: 769px) {
    .areaKey .keyList li a:hover {
        transform: translateY(10px);
    }

    .scroll-hint-icon {
        width: 200px;
        padding-top: 30px;
    }
    .scroll-hint-icon:before {
        width: 55px;
        height: 55px;
    }
    .scroll-hint-icon:after {
        width: 44px;
        height: 24px;
        background-size: 100%;
        margin-left: -27px;
    }
    .scroll-hint-text {
        font-size: 16px;
        margin-top: 10px;
    }
}
@media(max-width: 768px) {
    /* areaIntro */
    .areaIntro {
        margin-top: clamp(60px, 12vw, 100px);
        margin-bottom: 10vw;
    }
    .areaIntro .introPhoto {
        margin-bottom: -3vw;
    }
    .areaIntro .introSub {
        font-size: clamp(18px, 4.5vw, 32px);
    }
    .areaIntro .introSub:not(:last-child) {
        margin-bottom: 6vw;
    }
    /* areaIntro */

    .areaKey {
        padding-top: 10vw;
    }
    .areaKey .keyIntro {
        width: 95%;
    }
    .areaKey .keyList {
        width: 95%;
        margin-bottom: 0;
    }
    .areaKey .keyPeople {
        width: 95%;
    }

    .areaCite .citeWrap .citePie .pieChart {
        width: 46.6%;
    }
    .areaCite .citeWrap .citeQuest {
        margin-bottom: clamp(30px, 10vw, 50px);
    }
    .areaCite .citeWrap .citeQuest .questQ {
        width: 6vw; 
        margin: 1vw 5vw 0 0;
    }
    .areaCite .citeWrap .citeQuest .questSub {
        width: calc(100% - 11vw);
        font-size: clamp(20px,4.3vw, 30px);
        padding: 3vw 4vw;
        border-radius: 15px;
    }
    .areaCite .citeWrap .citeQuest .questSub::before {
        top: 3vw;
        left: -3vw;
        width: 4vw;
        height: 5vw;
    }
    .areaCite .citeWrap .citeNote {
        width: 92%;
        margin: 0 auto clamp(30px, 10vw, 50px);
    }
    .areaCite .citeWrap .citeNote .note {
        font-size: clamp(18px, 4.5vw, 32px);
    }
    .areaCite .citeWrap .citeNote .note::before, 
    .areaCite .citeWrap .citeNote .note::after {
        left: 0vw;
        width: clamp(1px, 2.5vw, 2px);
        height: 100%;
    }
    .areaCite .citeWrap .citeNote .note::after {
        left: auto;
        right: 1vw;
    }
    .areaCite .citeWrap .citeSub {
        width: 92%;
        font-size: clamp(16px, 3.2vw, 24px);
        padding: 2vw 4vw 3vw;
        border-radius: 15px;
    }
    .areaCite .citeWrap .citePie {
        margin-bottom: clamp(30px, 10vw, 50px);
    }
    .areaCite .citeWrap .citePie .pieChart .chartSub {
        font-size: clamp(16px, 3.2vw, 24px);
        padding: 0;
    }
    .areaCite .citeTable .tableNote {
        font-size: clamp(16px, 3.2vw, 24px);
        margin-top: 6vw;
        margin-left: 50vw;
    }

    .areaMoney {
        padding: 10vw 0;
    }
    .areaMoney .areaTitle {
        margin-bottom: clamp(30px, 10vw, 50px);
    }

    .areaIkigai {
        padding: 10vw 0;
    }
    .areaIkigai .citeWrap .ikigaiSub {
        font-size: clamp(18px, 4.5vw, 32px);
        margin-bottom: clamp(20px, 10vw, 30px);
        
    }
    .areaCite .citeTable .tableWrap {
        margin-left: 4%;
        margin-right: 3%;
    }
    .areaCite .citeTable .tableWrap table {
        padding-right: 3%;
    }
    .areaCite .citeTable .tableWrap table th {
        font-size: clamp(26px, 5.5vw, 36px);
        padding: 2vw 3vw 2vw 2vw;
    }
    .areaCite .citeTable .tableWrap table th:not(:first-child) {
        min-width: auto;
    }
    .areaCite .citeTable .tableWrap table td {
        font-size: clamp(17px, 4.5vw, 28px);
        padding: 1vw 3vw 1vw 2vw;
    }

    .areaLife {
        padding: 10vw 0;
    }
    .areaLife .areaTitle {
        margin-bottom: clamp(30px, 10vw, 50px);
    }
    .areaLife .citeTable .tableWrap table td:first-child {
        padding: 0;
    }
    .areaCite .citeTable .tableWrap table td img {
        height: 20vw;
    }

    .areaLife .citeTable .tableWrap table td.citeBox {
        width: clamp(280px, 68vw, 80vw);
    }
    .areaLife .citeTable .tableWrap table td.citeBox .placeName {
        font-size:clamp(22px, 4.8vw, 34px);
        margin-right: 2vw;
    }
    .areaLife .citeTable .tableWrap table td.citeBox .placeBig {
        width: calc(100% - 14.5vw);
        font-size: clamp(32px, 6.6vw, 40px);
        margin-top: -1vw;
    }
    .areaLife .citeTable .tableWrap table td.citeBox .placeBig .fs17 {
        font-size: clamp(12px, 3.5vw, 20px);
        margin-top: 2vw;
        transform: translateY(0);
    }
    .areaLife .citeThink .citeTable {
        margin-bottom: 10vw;
    }
    .areaLife .citeThink .citeTable .tableWrap table td.citeBox {
        width: clamp(320px, 80vw, 401px);
        padding-bottom: 1.1vw;
    }
    .areaLife .citeThink .citeTable .tableWrap table tr:not(:nth-child(1),:nth-child(2),:nth-child(3)) td.citeBox .placeBig {
        width: calc(100% - 15vw);
        transform: translateY(0.3vw);
    }
    .areaLife .citeThink .citeTable .tableWrap table tr:not(:nth-child(1),:nth-child(2),:nth-child(3)) td img {
        height: 15vw;
    }
    .areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeBig .fs42 {
        font-size: clamp(22px, 4.8vw, 32px);
    }
    .areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeName.fs33 {
        width: 10.6vw;
        font-size: clamp(20px, 5vw, 26px);
        margin-right: 2vw;
    }
    .areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeName.fs33 .fs32 {
        font-size: clamp(20px, 5vw, 26px);
    }
    .areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeBig .fs26 {
        font-size: clamp(16px, 4.2vw, 24px);
    }

    .areaLife .citeWrap .thinkSub {
        font-size: clamp(18px, 4.5vw, 32px);
        margin-bottom: clamp(20px, 10vw, 30px);
    }

    .areaSummary {
        padding: 10vw 8vw 15vw;
        margin-bottom: 10vw;
    }
    .areaSummary .summarySub {
        font-size: clamp(18px, 4.5vw, 32px);
        margin-bottom: 15vw;
    }
    .areaSummary .areaBtn::before {
        top: -9vw;
        border-left: clamp(16px, 3.4vw, 22px) solid transparent;
        border-right: clamp(16px, 3.4vw, 22px) solid transparent;
        border-top: clamp(16px, 3.4vw, 22px) solid #fff;
    }
    .areaSummary .summarySub .line::before {
        bottom: -4px;
        height: clamp(4px, 1vw, 6px);
    }


    .areaSurvey {
        margin-bottom: 15vw;
    }
    .areaSurvey .areaTitle {
        margin-bottom: clamp(20px, 10vw, 30px);
    }
    .areaSurvey .surveyTable th {
        width: 35%;
        font-size: clamp(16px, 4.4vw, 20px);
        padding: 3vw 1vw 3vw 2vw;
    }
    .areaSurvey .surveyTable td {
        font-size: clamp(14px, 4vw, 18px);
        padding: 3vw 2vw;
    }
}

@media(max-width: 430px) {
    .areaCite .citeWrap .citePie {
        justify-content: center;
    }
    .areaCite .citeWrap .citePie .pieChart {
        width: 90%;
    }
    .areaCite .citeWrap .citePie .pieChart:not(:last-child) {
        margin-bottom: 30px;
    }
    .areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeName.fs33 {
        width: 13.6vw;
    }
    .areaLife .citeTable .tableWrap table td.citeBox .placeBig {
        width: calc(100% - 16vw);
    }
    .areaLife .citeThink .citeTable .tableWrap table tr:not(:nth-child(1),:nth-child(2),:nth-child(3)) td.citeBox .placeBig {
        width: calc(100% - 17vw);
        transform: translateY(1.3vw);
    }
    .areaCite .citeTable .tableNote {
        margin-left: 60vw;
    }
}
@media (max-width: 375px) {
    .areaLife .citeTable .tableWrap table td.citeBox .placeBig {
        width: calc(100% - 18vw);
    }
    .areaLife .citeThink .citeTable .tableWrap table td.citeBox .placeName.fs33 {
        width: 14.6vw;
    }
    .areaLife .citeThink .citeTable .tableWrap table tr:not(:nth-child(1),:nth-child(2),:nth-child(3)) td.citeBox .placeBig {
        width: calc(100% - 19vw);
    }
}

@media (max-width: 369px) {
    .areaLife .citeTable .tableWrap table td.citeBox .placeBig {
        width: calc(100% - 24vw);
    }
}