main > header {
    background:url(../up_load_files/page_header/experienceinjapan.jpg) center center / cover no-repeat;
}

main .report-photo article {
    padding:20px;
    background:#fff;
    box-shadow:0 0 2px rgba(0,0,0,0.4);
    border-radius:8px;
    margin-bottom:40px;
    text-align:center;
    position:relative;
}
main .report-photo article:first-of-type {
    box-shadow:none;
    padding:10% 0 0 0;
}
main .report-photo article:first-of-type h3 {
    font-size:1.8em;
    font-family: 'Bahnschrift Regular';
    padding:0 0 10px 0;
    margin:0;
    text-align:center;
}
main .report-photo article:first-of-type p {
    font-family: 'Bahnschrift Regular';
}
main .report-photo article img {
    margin-bottom:10px;
}

main .report-photo article:after {
    content:'➡';
    color:#EE793F;
    font-size:2em;
    position:absolute;
    top:50%;
    right:-20px;
    transform:translateY(-50%);
    z-index:10;
}
main .report-photo article:first-of-type:after ,
main .report-photo article:nth-of-type(4):after ,
main .report-photo article:last-of-type:after {
    display:none;
}

main .report-photo article:nth-of-type(2) {
    transform:rotate(-2deg);
}
main .report-photo article:nth-of-type(3) {
    transform:rotate(1deg);
}
main .report-photo article:nth-of-type(4) {
    transform:rotate(-1deg);
}
main .report-photo article:nth-of-type(5) {
    transform:rotate(3deg);
}
main .report-photo article:nth-of-type(6) {
    transform:rotate(2deg);
}
main .report-photo article:nth-of-type(7) {
    transform:rotate(-3deg);
}
main .report-photo article:nth-of-type(8) {
    transform:rotate(1deg);
}

main .report-timetable h4 {
    font-family: 'Bahnschrift Regular';
    color:#1F3134;
    font-size:1.3em;
    padding:0 0 20px 0;
}
main .report-timetable ul {
    padding:0;
    margin:0;
}
main .report-timetable ul li {
    font-family: 'Bahnschrift Regular';
    padding:0 0 15px 0;
    margin:0;
    list-style:none;
}


main .tuition-fee {
    display:flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-bottom:20px;
}
main .tuition-fee div:nth-of-type(2) {
    border-radius:100%;
    width:clamp(72px, 12vw, 90px);
    aspect-ratio: 1;
    background:var(--color-green);
    padding:clamp(5px, 2vw, 20px);
    z-index:3;
    border:solid 4px var(--color-white);
}
main .tuition-fee .min {
    display:flex;
    align-items: center;
    margin-right:-20px;
    flex:1;
}
main .tuition-fee .min span {
    background:var(--color-blue);
    color:var(--color-white);
    font-size:clamp(14px, 3vw, 20px);
    padding:10px;
    flex:1;
    position:relative;
}
main .tuition-fee .min span::before {
    content:'';
    display:block;
    height:calc(100% + 40px);
    width:40px;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background:var(--color-blue);
    position:absolute;
    left:-39px;
    top:50%;
    translate: 0 -50%;
}
main .tuition-fee .min div {
    display:flex;
    align-items: center;
    color:var(--color-blue);
    margin-right:50px;
    font-size:clamp(18px, 4vw, 24px);
    font-weight:bold;
}

main .tuition-fee .max {
    display:flex;
    align-items: center;
    margin-left:-20px;
    flex:1;
}
main .tuition-fee .max span {
    background:var(--color-orange);
    color:var(--color-white);
    font-size:clamp(14px, 3vw, 20px);
    padding:10px;
    flex:1;
    position:relative;
    text-align:right;
}
main .tuition-fee .max span::after {
    content:'';
    display:block;
    height:calc(100% + 40px);
    width:40px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--color-orange);
    position:absolute;
    right:-39px;
    top:50%;
    translate: 0 -50%;
}
main .tuition-fee .max div {
    display:flex;
    align-items: center;
    color:var(--color-orange);
    margin-left:50px;
    font-size:clamp(18px, 4vw, 24px);
    font-weight:bold;
}

/* 円グラフ */
main .chart-container {
    container-type: inline-size;
}
:root {
    --r: 20cqw;
    --label-pos: 1.2;
}
main .chart {
    position: relative;
    width: calc(var(--r) * 4);
    aspect-ratio: 1;
    border-radius: 50%;
    margin:20px auto;
}
.main-label {
    position: absolute;
    top: 35%;
    left: 35%;
    width:30%;
    aspect-ratio: 1;
    background:var(--color-white);
    color:var(--color-green);
    font-size:1.2em;
    font-weight:bold;
    text-align: center;
    border-radius: 100%;
    display:flex;
    align-items: center;
    justify-content: center;
}
.label {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    font-size: 18px;
    font-weight:bold;
    text-align: center;
    color:var(--color-white);
    display:flex;
    align-items: center;
    justify-content: center;
    width:30px;
    height:30px;
    background:var(--color-green);
    border:solid 2px var(--color-white);
    border-radius: 100%;
    font-family: 'Bahnschrift Regular';
    line-height:1;
}

.label-1 {
    --start: 0;
    --end: 0.33;
    --percentage: calc((var(--start) + var(--end)) / 2);
    --angle: calc(var(--percentage) * 360deg);
    --deg: calc(-90deg + var(--angle));
    translate: calc(cos(var(--deg)) * var(--r) * var(--label-pos)) calc(sin(var(--deg)) * var(--r) * var(--label-pos));
}
.label-2 {
    --start: 0.33;
    --end: 0.73;
    --percentage: calc((var(--start) + var(--end)) / 2);
    --angle: calc(var(--percentage) * 360deg);
    --deg: calc(-90deg + var(--angle));
    translate: calc(cos(var(--deg)) * var(--r) * var(--label-pos)) calc(sin(var(--deg)) * var(--r) * var(--label-pos));
}
.label-3 {
    --start: 0.73;
    --end: 0.80;
    --percentage: calc((var(--start) + var(--end)) / 2);
    --angle: calc(var(--percentage) * 360deg);
    --deg: calc(-90deg + var(--angle));
    translate: calc(cos(var(--deg)) * var(--r) * var(--label-pos)) calc(sin(var(--deg)) * var(--r) * var(--label-pos));
}
.label-4 {
    --start: 0.80;
    --end: 0.83;
    --percentage: calc((var(--start) + var(--end)) / 2);
    --angle: calc(var(--percentage) * 360deg);
    --deg: calc(-90deg + var(--angle));
    translate: calc(cos(var(--deg)) * var(--r) * var(--label-pos)) calc(sin(var(--deg)) * var(--r) * var(--label-pos));
}
.label-5 {
    --start: 0.83;
    --end: 0.88;
    --percentage: calc((var(--start) + var(--end)) / 2);
    --angle: calc(var(--percentage) * 360deg);
    --deg: calc(-90deg + var(--angle));
    translate: calc(cos(var(--deg)) * var(--r) * var(--label-pos)) calc(sin(var(--deg)) * var(--r) * var(--label-pos));
}
.label-6 {
    --start: 0.88;
    --end: 0.96;
    --percentage: calc((var(--start) + var(--end)) / 2);
    --angle: calc(var(--percentage) * 360deg);
    --deg: calc(-90deg + var(--angle));
    translate: calc(cos(var(--deg)) * var(--r) * var(--label-pos)) calc(sin(var(--deg)) * var(--r) * var(--label-pos));
}
.label-7 {
    --start: 0.96;
    --end: 1;
    --percentage: calc((var(--start) + var(--end)) / 2);
    --angle: calc(var(--percentage) * 360deg);
    --deg: calc(-90deg + var(--angle));
    translate: calc(cos(var(--deg)) * var(--r) * var(--label-pos)) calc(sin(var(--deg)) * var(--r) * var(--label-pos));
}
main .out-label {
    list-style:none;
    margin-left:0;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
}
main .out-label li {
    text-align: center;
    color:var(--color-white);
    background:var(--color-green);
    border-radius:10px;
    padding:5px;
    display:flex;
    align-items: center;
    justify-content:space-between;
    gap:5px;
}
main .out-label li span {
    font-weight:bold;
    text-align: center;
    color:var(--color-green);
    display:flex;
    align-items: center;
    justify-content: center;
    width:30px;
    height:30px;
    background:var(--color-white);
    border-radius: 100%;
    font-family: 'Bahnschrift Regular';
    line-height:1;
}
main .out-label li div {
    flex:1;
    display:flex;
    align-items: center;
    justify-content: flex-start;
}


main .living-expenses {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
    list-style:none;
    margin-left:0;
}
main .living-expenses li {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:10px;
}
main .living-expenses figure {
    width:100%;
    max-width:60px;
    aspect-ratio: 1;
}
main .living-expenses figure img {
    width:100%;
    height:100%;
    object-fit: contain;
}
main .living-expenses span {
    text-align:center;
}


/* Voice */
.voice {
    border:solid 1px #ccc;
    margin-bottom:40px;
}
.voice:hover {
    color:#fff;
    background:#0B76C7;
    box-shadow:0 0 5px rgba(0,0,0,0.3);
    border:solid 1 #fff;
}
.voice div {
    position:relative;
    overflow:hidden;
}
.voice div h3 {
    position:absolute;
    top:20px;
    left:-190px;
    transform:rotate(-45deg);
    background:#f7f71b;
    padding:10px 200px;
    color:#000 !important;
}
.voice h2 {
    padding:20px;
    font-size:1.2em;
}
.voice:hover h2 {
    color:#fff !important;
}
.voice ul {
    padding:0 20px 15px 20px;
    margin:0;
    list-style:none;
}
.voice ul li {
    padding:5px;
    margin:0 0 5px 0;
    font-size:0.8em;
    background:rgb(11, 118, 199);
    color:#fff;
}
.voice:hover ul li {
    background:#fff;
    color:rgb(11, 118, 199);
}
.voice ul li:last-of-type {
    background:rgba(11, 118, 199, 0.8);
}
.voice:hover ul li:last-of-type {
    background:rgba(255, 255, 255, 0.8);
}

#voice-detail > h3 {
    color:#0B76C7;
    line-height:1.6;
    padding-bottom:10px;
    clear:both;
}
#voice-detail > p {
    padding-bottom:40px;
}
#voice-detail .flex h3 {
    font-size:1em;
    color:#0B76C7;
    font-weight:bold;
    padding:0 0 5px 0;
}
#voice-detail h3.question {
    color:#0B76C7;
    clear:both;
}
#voice-detail .answer {
    padding-bottom:40px;
}
#voice-detail .answer img {
    max-width:30%;
    margin-bottom:20px;
}
#voice-detail .answer img {
    float:right;
    margin-left:20px;
}


/** Media Query **/
@media only screen and (max-width : 820px) {
    main .flex:has(> .chart-container) {
        flex-direction: column;
    }
    main .flex:has(> .chart-container) > * {
        width:calc(100% - 40px);
    }
}
@media only screen and (max-width : 640px) {
    .voice {
        width:100% !important;
    }
    main .report-photo article {
        width:100% !important;
    }
    main .report-photo article:after {
        content:'▼';
        color:#EE793F;
        font-size:2em;
        position:absolute;
        left:50%;
        bottom:-20px;
        top:auto;
        transform:translateX(-50%);
        z-index:10;
        display:inline-block !important;
    }
    main .report-photo article:last-of-type:after {
        display:none !important;
    }
    main .report-timetable {
        width:100% !important;
    }
    main article.g5 {
        width:100% !important;
    }

    :root {
        --r: 25cqw;
        --label-pos: 1.6;
    }
    main .out-label {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width : 520px) {
    main .tuition-fee div:nth-of-type(2) {
        display:none;
    }
    main .tuition-fee .min {
        margin-right:0;
    }
    main .tuition-fee .max {
        margin-left:0;
    }
    main .tuition-fee .min span::before {
        height:calc(100% + 20px);
        width:20px;
        left:-19px;
    }
    main .tuition-fee .max span::after {
        height:calc(100% + 20px);
        width:20px;
        right:-19px;
    }
    main .tuition-fee .min div {
        margin-right:30px;
    }
    main .tuition-fee .max div {
        margin-left:30px;
    }
}