@charset "UTF-8";
html {
    scroll-behavior: smooth;
}

/*======================================================================
Global Variables
======================================================================*/
:root {
    --color-white: #FFF;
    --color-black: #222;
    --color-primary: #1486AD;
    --color-secondary: #7FC7E2;
    --color-tertiary: #EEF7FB;

/* radius */
    --radius-4: 4px;
    --radius-200: 200px;
    --radius-max: 999px;

    /* margin */
    --margin-0: 0;
    --margin-4: 4px;
    --margin-6: 6px;
    --margin-8: 8px;
    --margin-12: 12px;
    --margin-16: 16px;
    --margin-24: 24px;
    --margin-32: 32px;
    --margin-40: 40px;
    --margin-48: 48px;
    --margin-64: 64px;
    --margin-80: 80px;
}

body {
    font-size: 1rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    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-black);
    background: var(--color-white);
}
body:has(.index) {
    background: var(--color-primary);
}

a {
    color: var(--color-black);
    text-decoration: none;
    box-sizing: border-box;
    transition: .3s;
}

a:hover {
    opacity: 0.5;
}

h1 {
    font-weight: normal;
}

/*======================================================================
    共通
======================================================================*/
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.box-wrap {
    margin: 0 auto;
    max-width: 768px;
    padding-inline: var(--margin-24);
    box-sizing: border-box;
}

.flex-box {
    display: flex;
    justify-content: space-between;
}

.main {
    padding-block: var(--margin-48) var(--margin-80);
}

.icon {
    display: flex;
    align-items: baseline;
    gap: var(--margin-8);
}
.icon::before {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    content: "";
    background: url(images/icon-star.svg);
}
.icon.bl::before {
    background: url(images/icon-star_bl.svg);
}


/*======================================================================
    画像トリミング
======================================================================*/
.img-wrap {
    display: block;
    position: relative;
    overflow: hidden;
}

.img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: .3s;
}

.img-wrap--wide      { aspect-ratio: 3 / 1; }
.img-wrap--post      { aspect-ratio: 4 / 1; }


/*======================================================================
    ハンバーガー
======================================================================*/
.gnav {
    min-width: 48px;
}

.menu_button {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    gap: var(--margin-6);
    padding: var(--margin-8);
    background: var(--color-primary);
    cursor: pointer;
}

.menu_button:hover {
    opacity: 0.7;
}

.menu_button_icon {
    position: relative;
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-white);
    transition: background 0.3s ease;
}

.menu_button_icon::before,
.menu_button_icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-white);
    transition: transform 0.3s ease;
}

.menu_button_icon::before { top: calc(7px * -1); }
.menu_button_icon::after  { top: 7px; }

.menu_button[aria-expanded="true"] .menu_button_icon {
    background: transparent;
}
.menu_button[aria-expanded="true"] .menu_button_icon::before {
    transform: translateY(7px) rotate(45deg);
}
.menu_button[aria-expanded="true"] .menu_button_icon::after {
    transform: translateY(calc(7px * -1)) rotate(-45deg);
}

.menu-main {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.menu-main.open {
    grid-template-rows: 1fr;
}

.menu-main > div {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0.3s ease;
}

.menu-main.open > div {
    margin-top: var(--margin-12);
    visibility: visible;
    background: rgba(255, 255, 255, 0.8);
}

.menu-main li {
    border-top: 1px solid var(--color-line);
}

.menu-main a {
    display: block;
    padding: 16px;
    font-weight: bold;
    text-align: center;
}

.menu-main a:hover {
    background: var(--color-hover);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .menu-main,
    .menu-main > div,
    .menu_button_icon,
    .menu_button_icon::before,
    .menu_button_icon::after {
        transition: none;
    }
}


/*======================================================================
    パンくず
======================================================================*/
.breadcrumb {
    margin: 0 auto;
    padding-top: var(--margin-24);
}

.breadcrumb ul li {
    padding-right: 5px;
    display: inline-block;
}

.breadcrumb ul li a span {
    font-weight: bold;
}

/*======================================================================
    header
======================================================================*/
.mv {
    min-height: 670px;
    padding-block: var(--margin-24);
    background: url(images/mv.webp) center / cover;
    border-radius: 0 0 0 var(--radius-200);
}

.header_logo img {
    width: auto;
}
.catch-copy {
    font-size: 28px;
    font-weight: bold;
    color: var(--color-white);
    @media screen and (max-width: 768px) {
        font-size: 24px;
    }
}
.mv .flex-box {
    margin-top: var(--margin-48);
    align-items: flex-end;
    gap: var(--margin-24);
    @media screen and (max-width: 768px) {
        margin-top: var(--margin-24);
    }
}
h1 {
    margin-top: var(--margin-16);
    padding: var(--margin-8);
    background: rgba(127, 199, 226, 0.70);
}
h2 {
    font-size: 28px;
    font-weight: bold;
}


/*======================================================================
    index
======================================================================*/
.index {
    color: var(--color-white);
    background: linear-gradient(180deg, #1486AD 69.71%, #89C3D6 86.06%, #FFF 95.67%);
}
.indexHeader {
    flex-direction: column;
    gap: var(--margin-16);
}
.indexHeader h2 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

.categoryList {
    margin-top: var(--margin-48);
}
.categoryList .flex-box {
    flex-direction: column;
}
.categoryList > .flex-box {
    gap: var(--margin-24);
    margin-top: var(--margin-32);
}
.categoryList .item {
    gap: var(--margin-8);
}
.categoryList .item h3 a {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-white);
}


/*======================================================================
    recommend
======================================================================*/
.recommend {
    padding-bottom: var(--margin-48);
    background: var(--color-white);
}
.recommend h2 {
    text-align: center;
    vertical-align: middle;
    color: var(--color-primary);
}
.recommend h2 span {
    align-items: center;
    justify-content: center;
    gap: var(--margin-4);
    font-size: 16px;
    font-weight: normal;
    color: var(--color-black);
}
.recommend .flex-box {
    flex-direction: column;
    gap: var(--margin-32);
    margin-top: var(--margin-32);
}
.recommend .item h3 {
    margin-top: var(--margin-8);
}
.recommend .item h3 a {
    font-size: 20px;
    font-weight: bold;
}
/*======================================================================
    footer
======================================================================*/
.footer {
    padding-block: var(--margin-40) var(--margin-16);
    color: var(--color-white);
    background: var(--color-primary);
}
.footer .box-wrap {
    flex-direction: column;
    gap: var(--margin-40);
}
.pagetop {
    justify-content: flex-end;
}
.pagetop a {
    padding: var(--margin-8) var(--margin-16);
    color: var(--color-primary);
    border-radius: var(--radius-max);
    background: var(--color-white);
}
.fnav ul {
    display: flex;
    flex-direction: column;
    gap: var(--margin-8);
}
.fnav a {
    color: var(--color-white);
}
.about-me {
    padding-top: var(--margin-24);
    border-top: solid 1px var(--color-white);
}
.about-me span {
    align-items: center;
    gap: var(--margin-4);
    margin-bottom: var(--margin-8);
}
.footer .logo img {
    width: auto;
}
.footer small {
    font-size: 16px;
    text-align: center;
}
/*======================================================================
    category
======================================================================*/
.categoryHeader {
    flex-direction: column;
    gap: var(--margin-8);
}
.categoryHeader h2 {
    color: var(--color-primary);
}

.categoryPost {
    flex-direction: column;
    margin-top: var(--margin-48);
}
.categoryPost .item {
    padding-block: var(--margin-16);
    border-bottom: solid 1px var(--color-secondary);
}
.categoryPost .item:first-child {
    padding-top: var(--margin-0);
}
.categoryPost .item h3 a {
    font-size: 20px;
    font-weight: bold;
}
.categoryPost .item p {
    margin-top: var(--margin-8);
}
/*======================================================================
    detail
======================================================================*/
.detailHeader {
    flex-direction: column;
    gap: var(--margin-16);
}
.detailHeader .img-wrap {
    position: relative;
}
.detailHeader h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 2 * var(--margin-32));
    margin-inline: var(--margin-32);
    z-index: 2;
    color: var(--color-white);
    text-align: center;
    @media screen and (max-width: 768px) {
        font-size: 20px;
    }
}
.detailHeader .img-wrap::before {
    position: relative;
    display: block;
    aspect-ratio: 3/1;
    content: "";
    background: rgba(127, 199, 226, 0.7);
    z-index: 1;
}
.detailHeader img {
    position: absolute;
    top: 0;
}
.detailHeader ul a {
    display: inline-block;
    padding: var(--margin-4) var(--margin-8);
    color: var(--color-white);
    border-radius: var(--radius-4);
    background: var(--color-primary);
}

.detailPost {
    margin-top: var(--margin-48);
}
.detailPost h3 {
    position: relative;
    margin: var(--margin-32) 0 17px;
    padding-bottom: 17px;
    font-size: 20px;
    font-weight: bold;
}
.detailPost h3::before {
    position: absolute;
    bottom: -8px;
    display: block;
    min-width: 20px;
    height: 20px;
    content: "";
    background: url(images/icon-star_bl.svg) no-repeat;
}
.detailPost h3::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    display: block;
    width: calc(100% - 24px);
    height: 2px;
    content: "";
    background-color: var(--color-primary);
}
.detailPost .img-wrap {
    margin-bottom: var(--margin-8);
}

.detailPost a {
    font-weight: bold;
    color: #d328c5;
}

/*======================================================================
    link
======================================================================*/
.link {
    padding-bottom: var(--margin-48);
    color: var(--color-primary);
    background: var(--color-white);
}
.link .flex-box {
    align-items: center;
    gap: var(--margin-48);
    margin-top: var(--margin-16);
    @media screen and (max-width: 768px) {
        gap: var(--margin-16);
    }
}
.link .flex-box p {
    flex: 1;
}