@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+Tai+Viet&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

html,
body {
    font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TaiViet", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W4', 'ヒラギノ角ゴ Pro';
    color: #555;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a,
a:visited {
    text-decoration: none;
    color: #1977ec;
}

a:hover {
    color: #ec194a;
}

:root {
    --main-color: #3eb134;
    --blue: #0583c1;
    --orange: #f2b032;
    --orange2: #e96208;
    --yellow: #ebc900;
    --pink: #e90862;
    --pink2: #fa92b2;
    --purple: #9d32e8;
}

.w126 {
    width: 100%;
    max-width: 1260px;
    margin: auto;
}

@media screen and (max-width:1300px) {
    .w126 {
        padding: 0 3%;
    }
}

/*=====================================
*
*header
*
=======================================*/
header {
    position: fixed;
    z-index: 9995;
    left: 0;
    top: 0;
    width: 100%;
    height: 103px;
    background-color: #fff;
}

header.shadow {
    box-shadow: 0px 5px 8px -8px rgba(117, 117, 117, 0.3);
}

header .inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

header .navi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

header .navi ul.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

header .navi ul.menu li {
    letter-spacing: 0.07em;
}

header .navi ul.menu li a {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    header .navi ul.menu li a:hover {
        opacity: 0.75;
    }
}

/*tb*/
@media screen and (max-width:1024px) {
    header .navi .logo-area {
        width: 220px;
    }

    header .navi ul.menu li a {
        font-size: 18px;
    }
}

@media screen and (max-width:767px) {
    header .navi ul.menu {
        gap: 15px;
    }

    header .navi ul.menu li a {
        font-size: 16px;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    header {
        height: 80px;
    }

    header .ham-btn {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 25px;
        height: 25px;
        margin: auto;
    }

    header .ham-btn span {
        display: inline-block;
        width: 100%;
        height: 3px;
        border-radius: 5px;
        background-color: var(--main-color);
    }
}

/*=====================================
*ハンバーガーメニュー
=======================================*/
/*sp*/
@media screen and (max-width:599px) {
    header .ham-menu {
        position: fixed;
        z-index: 9997;
        top: 50%;
        left: 50%;
        width: 85%;
        height: 65vh;
        background-color: #fff;
        transform: translate(-50%, -50%);
        overflow-y: scroll;
        transition: 0.3s ease-in-out;
        pointer-events: none;
        opacity: 0;
    }

    header .ham-menu.active {
        pointer-events: initial;
        opacity: 1.0;
    }

    header .ham-menu .logo-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px 3% 35px;
    }

    header .ham-menu .logo-area img {
        width: 220px;
    }

    header .ham-menu .logo-btn .btn-area>span {
        display: block;
        font-size: 12px;
        line-height: 1.0;
        color: var(--main-color);
        margin-top: 1px;
    }

    header .ham-menu .logo-btn .close-btn {
        position: relative;
        width: 25px;
        height: 25px;
        margin: auto;
        transform: rotate(45deg);
    }

    header .ham-menu .logo-btn .close-btn span {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 3px;
        border-radius: 5px;
        background-color: var(--main-color);
    }

    header .ham-menu .logo-btn .close-btn span:first-of-type {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
    }

    header .ham-menu .logo-btn .close-btn span:last-of-type {
        position: absolute;
        transform: translate(-50%, -50%) rotate(90deg);
        left: 50%;
        top: 50%;
    }

    header .ham-menu .menu-area p {
        position: relative;
        font-size: 25px;
        font-weight: 700;
        color: #666;
        margin-bottom: 35px;
        text-align: center;
    }

    header .ham-menu .menu-area p::before {
        content: "";
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: -5px;
        display: inline-block;
        width: 25px;
        height: 3px;
        border-radius: 5px;
        background-color: var(--main-color);

    }

    header .ham-menu ul.menu {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 95%;
        margin: auto;
    }


    header .ham-menu ul.menu li {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0.05em;
        border-bottom: 1px solid #efefef;
    }

    header .ham-menu ul.menu li:first-of-type {
        border-top: 1px solid #efefef;
    }

    header .ham-menu ul.menu li a {
        display: inline-block;
        padding: 15px 0;
        color: var(--main-color);
    }

    header .sp-bg {
        position: fixed;
        z-index: 9996;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-color: #555;
        transition: 0.3s ease-in-out;
        pointer-events: none;
        opacity: 0;
    }

    header .sp-bg.active {
        pointer-events: initial;
        opacity: 0.65;
    }
}

/*=====================================
*コンテンツ内容
=======================================*/
main .wrapper {
    margin-top: 103px;
}

.icn-link_area {
    padding: 55px 0;
    background-color: #d3e9da;
}

.icn-link_area ul {
    display: flex;
    justify-content: center;
    gap: calc((55 / 770) * 100%);
    width: 100%;
    max-width: 770px;
}

.icn-link_area li {
    position: relative;
    width: calc((220 / 770) * 100%);
    height: 110px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid;
    overflow: hidden;
    transition: 0.45s ease-in-out;
}

@media (any-hover:hover) {
    .icn-link_area li:hover {
        transform: translateY(-10px);
    }
}

.icn-link_area li::after {
    content: "";
    position: absolute;
    right: calc(((26 / 218) * 100%) * -1);
    bottom: 0;
    width: calc((52 / 218) * 100%);
    height: calc((23 / 110) * 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.icn-link_area li.jp {
    border-color: var(--main-color);
}

.icn-link_area li.jp::after {
    background-color: var(--main-color);
}

.icn-link_area li.easy-jp {
    border-color: var(--blue);
}

.icn-link_area li.easy-jp::after {
    background-color: var(--blue);
}

.icn-link_area li.en {
    border-color: var(--orange);
}

.icn-link_area li.en::after {
    background-color: var(--orange);
}

.icn-link_area li .icn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
}

.icn-link_area li a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 600;
    line-height: calc(25 / 20);
    text-align: center;
}

.icn-link_area li.jp a {
    color: var(--main-color);
}

.icn-link_area li.easy-jp a {
    color: var(--blue);
}

.icn-link_area li.en a {
    color: var(--orange);
}

/*tb*/
@media screen and (max-width:767px) {
    .icn-link_area ul {
        justify-content: center;
        gap: 10px;
        max-width: 770px;
    }

    .icn-link_area li {
        width: calc((100% - 20px) / 3);
        height: 110px;
    }

    .icn-link_area li .icn {
        top: 10px;
        left: 10px;
        transform: scale(0.85);
        transform-origin: left top;
    }

    .icn-link_area li a {
        font-size: 20px;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    main .wrapper {
        margin-top: 80px;
    }

    .icn-link_area {
        padding: 35px 0;
    }

    .icn-link_area li {
        height: 80px;
    }

    .icn-link_area li::after {
        width: calc(((52 * 1.5) / 218) * 100%);
        height: calc(((23 * 1.5) / 110) * 100%);
        right: calc((((26 * 1.5) / 218) * 100%) * -1);
    }

    .icn-link_area li a {
        font-size: 16px;
    }

    .icn-link_area li .icn {
        top: 10px;
        left: 10px;
        transform: scale(0.65);
        opacity: 0.55;
    }
}

/*=====================================
*
*言語説明セクション
*
=======================================*/
.langage-sec {
    margin-top: 90px;
}

.langage-sec ul.langage-list {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}

.langage-sec ul.langage-list li {
    padding: 17.5px 25px 16px;
    border: solid 2px #d4d4d9;
    border-radius: 10px;
}

.langage-sec ul.langage-list li h3 {
    display: flex;
    gap: calc((10 / 18)* 1.0em);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 4.5px;
}

.langage-sec ul.langage-list li h3::before {
    content: "";
    position: relative;
    top: 4.5px;
    display: inline-block;
    width: 1.0em;
    height: 1.0em;
    background-color: #555;
}

.langage-sec ul.langage-list li.jp h3 {
    color: var(--main-color);
}

.langage-sec ul.langage-list li.jp h3::before {
    background-color: var(--main-color);
}

.langage-sec ul.langage-list li.easy-jp h3 {
    color: var(--blue);
}

.langage-sec ul.langage-list li.easy-jp h3::before {
    background-color: var(--blue);
}

.langage-sec ul.langage-list li.en h3 {
    color: var(--orange);
}

.langage-sec ul.langage-list li.en h3::before {
    background-color: var(--orange);
}

.langage-sec ul.langage-list li.vi h3 {
    color: var(--yellow);
}

.langage-sec ul.langage-list li.vi h3::before {
    background-color: var(--yellow);
}

.langage-sec ul.langage-list li.id h3 {
    color: var(--pink);
}

.langage-sec ul.langage-list li.id h3::before {
    background-color: var(--pink);
}

.langage-sec ul.langage-list li.tl h3 {
    color: var(--orange2);
}

.langage-sec ul.langage-list li.tl h3::before {
    background-color: var(--orange2);
}

.langage-sec ul.langage-list li.ch h3 {
    color: var(--pink2);
}

.langage-sec ul.langage-list li.ch h3::before {
    background-color: var(--pink2);
}

.langage-sec ul.langage-list li.kr h3 {
    color: var(--purple);
}

.langage-sec ul.langage-list li.kr h3::before {
    background-color: var(--purple);
}

.langage-sec ul.langage-list li p {
    font-size: 14px;
    font-weight: 700;
    line-height: calc(32 / 14);
    word-break: break-all;
    color: #000;
}

/*tb*/
@media screen and (max-width:1024px) {
    .langage-sec ul.langage-list {
        gap: 10px;
    }

    .langage-sec ul.langage-list li {
        padding: 18px 15px 15px;
    }

    .langage-sec ul.langage-list li h3 {
        font-size: 16px;
    }
}

@media screen and (max-width:899px) {
    .langage-sec ul.langage-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*sp*/
@media screen and (max-width:599px) {
    .langage-sec ul.langage-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .langage-sec ul.langage-list li h3 {
        font-size: 16px;
    }

    .langage-sec ul.langage-list li {
        border-radius: 7.5px;
    }

    .langage-sec ul.langage-list li p {
        font-size: 14px;
    }
}

/*=====================================
*
*footer
*
=======================================*/
footer {
    margin-top: 120px;
}

footer .foot-cont {
    padding: 35px 0;
    background-color: #f8f8f8;
}


footer .top-foot_cont {
    display: flex;
    justify-content: space-between;
}

footer .top-foot_cont .left .info ul {
    margin-top: 20px;
}

footer .top-foot_cont .left .info ul li {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #000;
}

footer .top-foot_cont .left .info ul li+li {
    margin-top: 5px;
}

footer .top-foot_cont .left .info ul li a {
    color: inherit;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    footer .top-foot_cont .left .info ul li a:hover {
        opacity: 0.75;
    }
}

footer .top-foot_cont .right ul {
    display: grid;
    gap: 12px 100px;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
}

footer .top-foot_cont .right ul li {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    footer .top-foot_cont .right ul li:hover {
        opacity: 0.75;
    }
}

footer .top-foot_cont .right ul li a {
    color: inherit;
    letter-spacing: 0.03em;
}

footer .under-foot_cont {
    margin-top: 17.5px;
}

footer .under-foot_cont ul {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

footer .copyright {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    text-align: center;
    padding: 12.5px 0;
}

/*tb*/
@media screen and (max-width:1024px) {
    footer .top-foot_cont .left .info ul li {
        font-size: 13px;
    }

    footer .top-foot_cont .right ul {
        gap: 12px 65px;
    }

    footer .top-foot_cont .right ul li {
        font-size: 14px;
    }
}

@media screen and (max-width:767px) {
    footer .top-foot_cont {
        display: flex;
        flex-wrap: wrap;
    }

    footer .top-foot_cont .left {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    footer .top-foot_cont .left .info {
        width: calc((100% - 110px));
    }

    footer .top-foot_cont .right {
        width: 100%;
        margin-top: 25px;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    footer .top-foot_cont .left .info ul li {
        font-size: 12px;
    }

    footer .top-foot_cont .right ul {
        gap: 12px 10px;
    }

    footer .under-foot_cont{
        margin-top: 35px;
    }

    footer .under-foot_cont ul {
        justify-content: center;
    }
}

/*=====================================
*
*pc&tablet&spのnone処理
*
=======================================*/
/*=====================================
*pc用
=======================================*/
@media screen and (max-width: 899px) {
    .pc {
        display: none;
    }
}

/*=====================================
  *pc以外
  =======================================*/
@media screen and (min-width: 900px) {
    .nopc {
        display: none;
    }
}

/*=====================================
  *sp以外
  =======================================*/
@media screen and (max-width: 600px) {
    .nosp {
        display: none;
    }
}

/*=====================================
  *tablet_sp共通
  =======================================*/
@media screen and (min-width: 900px) {
    .sp_tb {
        display: none;
    }
}

@media screen and (max-width: 899px) {
    .sp_tb {
        display: inherit;
    }
}

/*=====================================
  *tablet用
  =======================================*/
@media screen and (min-width: 900px) {
    .tb {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .tb {
        display: none;
    }
}

/*=====================================
  *sp用
  =======================================*/
@media screen and (min-width: 600px) {
    .sp {
        display: none;
    }
}

@media screen and (max-width: 599px) {
    .sp {
        display: inherit;
    }
}