@charset "UTF-8";
/*======================================================================
  Reset CSS for HTML5
======================================================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, main, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align:baseline;
    background: transparent;
}
ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align: baseline;
    background: transparent;
}
img {
    line-height: 1;
    vertical-align: bottom;
}

/*change colours to suit your needs*/
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}


/*======================================================================
  VARIABLE
======================================================================*/
:root {
    /* color */
    --color-default: #FFF;
    --color-primary: #008AD2;
    --color-secondary: #E5EAF0;
    --color-tertiary: #204483;

    --color-text-default: #333;
    --color-text-default-inversion: #FFF;
    --color-text-primary: #008AD2;
    --color-text-secondary: #204483;

    --color-border-default: #E5EAF0;
    --color-border-default-inversion: #FFF;
    --color-border-secondary: #ABB8C3;

    /* radius */
    --radius-max: 100vmax;
    --radius-md: 20px;
    --radius-sm: 4px;

    /* margin */
    --margin-lg: 40px;
    --margin-s: 24px;
    --margin-xs: 16px;
    --margin-xxs: 8px;

    /* font-size */
    --font-size-32: 3.2rem;
    --font-size-20: 2rem;
    --font-size-18: 1.8rem;
    --font-size-16: 1.6rem;
}
@media screen and (max-width: 768px) {
    :root {
        --font-size-32: 2.8rem;
    }
}


/*======================================================================
  BASIC
======================================================================*/
html,body {
    height: 100%;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body {
    line-height: 1.5;
    font-family: "Yu Gothic" , "Yu Gothic UI" , "Segoe UI" , "游ゴシック" , "Meiryo" , "Meiryo UI" , "メイリオ" , "Hiragino Sans" , "Sanfrancisco" , "Hiragino Kaku" , "Gothic ProN" , "Helvetica Neue" , "Noto Sans CJK JP" , "Roboto" , sans-serif;
    color: var(--color-text-default);
    font-size: 1.6rem;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    background: var(--color-default);
}
p { line-height: 1.5; }
a {
    color: var(--color-primary);
    text-decoration: none;
}
@media (hover: hover) {
    a:hover,
    a:hover img {
        opacity: .5;
    }
}


/*======================================================================
  FORMAT
======================================================================*/
/*====== block class ======*/
.box {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--margin-s);
}

/*====== trimming ======*/
.trimming {
    display: block;
	max-width: 100%;
    position: relative;
    overflow: hidden;
}
.trimming img {
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    width: 100%;
    height: auto;
    margin: auto;
}

/*====== flexBox ======*/
.flexBox {
    display: flex;
    justify-content: space-between;
}

/*====== common style ======*/
img {
    display: block;
    max-width: 100%;
    height: auto;
}

.heading {
    display: flex;
    align-items: flex-end;
    gap: var(--margin-s);
    position: relative;
    margin-top: var(--margin-xxs);
    font-size: var(--font-size-32);
    font-weight: bold;
    color: var(--color-text-secondary);
}
.heading::before {
    display: block;
    position: absolute;
    top: -8px;
    left: 0;
    width: 64px;
    height: 4px;
    content: "";
    background: var(--color-primary);
}
.heading span {
    font-size: var(--font-size-16);
    font-weight: normal;
    color: var(--color-text-default);
}

.bg-gradation {
    padding-block: var(--margin-s);
    background: linear-gradient(270deg, #F6FDFF 0%, #E4F8FF 20%, #E9F4FF 60%, #F7FDFF 100%);
}

/* categoryList_mini */
.categoryList_mini {
    flex-direction: column;
    gap: var(--margin-xxs);
}
.categoryList_mini a {
    display: inline-block;
    padding: var(--margin-xxs);
    border-radius: var(--radius-sm);
    font-weight: bold;
    background: var(--color-secondary);
}
.categoryList_mini li:last-child a {
    color: var(--color-text-secondary);
}
@media (hover: hover) {
    .categoryList_mini li a:hover {
        color: var(--color-text-default-inversion);
        background: var(--color-primary);
        opacity: 1;
    }
    .categoryList_mini li:last-child a:hover {
        background: var(--color-tertiary);
    }
}


/*======================================================================
  HEADER
======================================================================*/
.header {
    position: relative;
    padding: 61px 0 38px;
    background:
        url(images/mv.svg) no-repeat center bottom,
        linear-gradient(270deg, #F6FDFF 0%, #E4F8FF 20%, #E9F4FF 60%, #F7FDFF 100%);
    @media screen and (max-width: 768px) {
        padding: 30px 0 38px;
        background-size: 100%;
    }
}
.header .flexBox:has(.about) {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    @media screen and (max-width: 768px) {
        gap: 15px;
    }
}
.header .about {
    display: inline-block;
    width: fit-content;
    padding: var(--margin-xxs) var(--margin-s);
    border-radius: var(--radius-max);
    border: 1px solid var(--color-primary);
    font-weight: bold;
    color: var(--color-text-default-inversion);
    background: var(--color-primary);
}
@media (hover: hover) {
    .header .about:hover {
        color: var(--color-primary);
        background-color: var(--color-secondary);
        opacity: 1;
    }
}
.header .logo {
    margin: 0 auto;
    @media screen and (max-width: 768px) {
        max-width: 60%
    }
}
.h1Wrapper {
    color: var(--color-text-default-inversion);
    background: linear-gradient(270deg, #65D7FF -10.53%, #008AD2 35.19%, #204483 80.92%);
}
.h1Wrapper > .box {
    padding: var(--margin-xxs);
}
h1 {
    margin: 0 auto;
    max-width: 501px;
    font-size: var(--font-size-16);
    font-weight: bold;
    text-align: center;
}

/*====== gnav ======*/
.gnav {
    padding: var(--margin-xxs);
    box-shadow: 0 4px 4px 0 rgba(0, 138, 210, 0.20);
}
.gnav > .box {
    justify-content: flex-end;
    width: 100%;
    padding: 0;
}

/* hamburger */
.hamburgerWrapper {
    gap: var(--margin-xxs);
    width: fit-content;
    padding: 0;
    cursor: pointer;
}
@media (hover: hover) {
    .hamburgerWrapper:hover {
        opacity: .5;
    }
}
.hamburgerWrapper > span {
    font-weight: bold;
    color: var(--color-text-secondary);
}
.hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 7px 3px;
}
.hamburger span {
    display: block;
    width: 14px;
    height: 2px;
    font-size: 0;
    background: var(--color-primary);
    transition: transform .4s ease-in-out;
}
.hamburger span:not(:last-of-type) {
    margin-bottom: 2px;
}
.hamburger span:first-child {
    margin-left: 4px;
}
.hamburger span:last-child {
    margin-right: 4px;
}

/* mainMenu */
.mainMenu {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}
.mainMenu ul li {
    border-bottom: 1px solid var(--color-primary);
}
.mainMenu ul li a {
    display: block;
    padding: var(--margin-xs);
    font-weight: bold;
    text-align: center;
    @media screen and (max-width: 768px) {
        padding-block: var(--margin-xxs);
    }
}

/*====== breadcrumb======*/
.breadcrumb {
    margin-block: var(--margin-xs);
}
.breadcrumb ul {
    display: block;
    padding: var(--margin-sm) 0 0;
    box-sizing: border-box;
}
.breadcrumb ul li {
    display: inline;
    line-height: 1.5;
    margin-left: 5px;
}
.breadcrumb ul li:first-child {
    margin-left: 0;
}
.breadcrumb ul li a span {
    font-weight: bold;
}


/*======================================================================
  FOOTER
======================================================================*/
.footer {
    position: relative;
    padding-top: var(--margin-lg);
    padding-bottom: var(--margin-s);
    color: var(--color-text-default-inversion);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: linear-gradient(270deg, #65D7FF -10.53%, #008AD2 35.19%, #204483 80.92%);
}
.footer .box {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--margin-lg);
    @media screen and (max-width: 677px) {
        flex-direction: column;
    }
}

/*====== pagetop ======*/
.pagetop {
    justify-content: flex-end;
    @media screen and (max-width: 677px) {
        align-self: flex-end;
    }
}
.pagetop a {
    display: inline-flex;
    align-items: center;
    position: relative;
    gap: var(--margin-xxs);
    font-weight: bold;
    color: var(--color-text-default-inversion);
}
.pagetop a::before {
    display: inline-block;
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    content: "";
    border-radius: var(--radius-max);
    background: var(--color-default);
}
.pagetop a::after {
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: var(--margin-xxs);
    content: "";
    -webkit-mask-image: url(images/icon_arrow.svg);
    mask-image: url(images/icon_arrow.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--color-primary);
    transform: rotate(-90deg);
}

/*====== fnav ======*/
.fnav > div > ul > li:not(:first-child) {
    margin-top: var(--margin-s);
}
.fnav li > ul {
    margin-left: var(--margin-s);
    list-style: disc;
}
.fnav li > ul li {
    margin-top: var(--margin-xs);
}
.fnav a {
    font-weight: bold;
    color: var(--color-text-default-inversion);
}

/*====== logo ======*/
.footer .logo {
    margin-top: var(--margin-s);
}

/*====== aboutMe ======*/
.aboutMe {
    margin-top: var(--margin-s);
}
.aboutMe span {
    justify-content: flex-start;
    align-items: center;
    gap: var(--margin-xxs);
    font-size: var(--font-size-18);
    font-weight: bold;
}
.aboutMe span::before {
    display: inline-block;
    min-width: 41px;
    height: 43px;
    content: "";
    background: url(images/icon_tent.svg);
}
.aboutMe p {
    margin-top: var(--margin-xs);
}

/*====== small ======*/
.footer small {
    display: block;
    margin-top: var(--margin-s);
    padding-top: var(--margin-xs);
    padding-inline: var(--margin-xs);
    text-align: center;
    border-top: 1px solid var(--color-border-default-inversion);
}


/*======================================================================
  RECOMMEND
======================================================================*/
.recommend {
    padding-block: var(--margin-s);
}
.recommend > .box > .flexBox {
    flex-direction: column;
    gap: var(--margin-s);
    margin-top: var(--margin-s);
}
.recommend li.flexBox {
    flex-direction: column;
    gap: var(--margin-xxs);
}
.recommend li.flexBox h3 a {
    display: inline-block;
    font-weight: bold;
    color: var(--color-text-default);
}
@media (hover: hover) {
    .recommend li.flexBox h3 a:hover {
        color: var(--color-text-primary);
        text-decoration: underline;
        opacity: 1;
    }
}
.recommend .trimming {
    aspect-ratio: 720 / 150;
    min-height: 100px;
    border-radius: var(--radius-md);
}

/*======================================================================
  INDEX
======================================================================*/
/*====== topics ======*/
.topics {
    justify-content: flex-start;
    align-items: flex-end;
    gap: var(--margin-s);
    @media screen and (max-width: 420px) {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--margin-xxs);
    }
}
.topics a {
    color: var(--color-text-default);
}

/*====== categoryList ======*/
.categoryList {
    margin-top: var(--margin-s);
}
.categoryList ul {
    flex-direction: column;
    gap: var(--margin-s);
}
.categoryList li {
    flex-direction: column;
    gap: var(--margin-xxs);
}
.categoryList .trimming {
    aspect-ratio: 720 / 150;
    min-height: 100px;
    border-radius: var(--radius-md);
}
.categoryList h3 a {
    position: relative;
    padding: var(--margin-xxs) var(--margin-sm);
    font-size: var(--font-size-18);
    font-weight: bold;
    color: var(--color-text-secondary);
}
@media (hover: hover) {
    .categoryList .trimming:hover h3 {
        color: var(--color-primary);
    }
    .categoryList .trimming:hover img {
        opacity: .5;
    }
}

/*====== news ======*/
.news {
    padding-block: var(--margin-s);
    background: var(--color-default);
}
.news ul {
    margin-top: var(--margin-s);
}
.news li {
    justify-content: flex-start;
    gap: var(--margin-xs);
    padding-block: var(--margin-xs);
    border-top: 1px solid var(--color-border-default);
    @media screen and (max-width: 768px) {
        flex-direction: column;
        gap: var(--margin-xxs);
    }
}
.news li:last-child {
    border-block: 1px solid var(--color-border-default);
}
.news time {
    font-weight: bold;
    color: var(--color-text-primary);
}
.news li a {
    display: inline-block;
    color: var(--color-text-default);
    font-weight: bold;
}
.news li a:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
    opacity: 1;
}


/*======================================================================
  CATEGORY
======================================================================*/
.category {
    padding-top: 0;
}
.category > .trimming {
    max-width: 768px;
    margin: 0 auto;
    aspect-ratio: 768 / 200;
    min-height: 120px;
    @media screen and (max-width: 768px) {
        max-width: 100%;
    }
}
.category .box {
    padding-top: var(--margin-s);
}

/*====== categoryHeader ======*/
.category h2 + p {
    margin-top: var(--margin-xxs);
}

/*====== postList ======*/
.postList {
    flex-direction: column;
    gap: var(--margin-s);
    margin-top: var(--margin-s);
}
.postList li.flexBox {
    flex-direction: column;
    gap: var(--margin-xxs);
}
.postList li.flexBox h3 a {
    font-weight: bold;
    color: var(--color-text-default);
}
@media (hover: hover) {
    .postList li.flexBox h3 a:hover {
        color: var(--color-text-primary);
        text-decoration: underline;
        opacity: 1;
    }
}
.postList .trimming {
    aspect-ratio: 720 / 150;
    min-height: 100px;
    border-radius: var(--radius-md);
}
.postList .more {
    justify-content: flex-end;
}
.postList .more a {
    display: inline-flex;
    align-items: center;
    gap: var(--margin-xxs);
    position: relative;
    font-weight: bold;
    color: var(--color-tertiary);
}
.postList .more a::before {
    display: inline-block;
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    content: "";
    border-radius: var(--radius-max);
    background: var(--color-primary);
    z-index: 0;
}
.postList .more a::after {
    display: inline-block;
    position: relative;
    width: 24px;
    height: 24px;
    padding: var(--margin-xxs);
    content: "";
    background: url(images/icon_arrow.svg) center no-repeat;
    z-index: 1;
}


/*======================================================================
  DETAIL
======================================================================*/
/*====== detailHeader ======*/
.detailHeader {
    padding-bottom: var(--margin-s);
    border-bottom: 1px dashed var(--color-border-secondary);
}
.detailHeader h2 {
    font-size: var(--font-size-18);
    font-weight: bold;
    text-align: center;
    color: var(--color-text-default-inversion);
}
.detailHeader .trimming {
    justify-content: center;
    align-items: center;
    position: relative;
    aspect-ratio: 720 / 172;
    max-width: 100%;
    min-height: 120px;
    padding: 12px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
}
.detailHeader .trimming::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 138, 210, .5);
    z-index: 50;
}
.detailHeader h2 {
    position: relative;
    z-index: 100;
}
.detailHeader .categoryList_mini,
.detailHeader p {
    margin-top: var(--margin-xxs);
}

/*====== detailPost ======*/
.detailPost {
    padding-block: var(--margin-s);
}
.detailPost h3 {
    margin-top: var(--margin-xs);
    font-size: var(--font-size-18);
    font-weight: bold;
    color: var(--color-text-secondary);
}
.detailPost .trimming {
    aspect-ratio: 720 / 200;
    min-height: 100px;
    max-width: 100%;
    margin-top: var(--margin-xs);
    margin-bottom: var(--margin-xxs);
}

/* DETAIL - a */
.detailPost a {
    display: inline-block;
    font-weight: bold;
    color: #7412f7;
}

/* DETAIL - リンク設置 */
.link_item,
.link_item + * {
    margin-top: 1em;
}
.trimming + .link_item {
    margin-top: 0;
}