@charset "UTF-8";
/* -------------------- WebFont General Setting -------------------- */
/*
 * Google Fonts : Noto Sans JP
 * https://fonts.google.com/noto/specimen/Noto+Sans+JP?query=noto
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* 
 * Google Fonts : Material Symbols
 * https://fonts.google.com/icons?icon.size=24&icon.color=%23e8eaed
*/
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');
/*
 * Google Fonts : Merriweather
 * https://fonts.google.com/specimen/Merriweather?preview.text=2024.9.1%20Sun%20OPEN%20~%209.30%20Mon%20LAST&stroke=Serif
 */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

/*
 * for PC BreakPoint
 * @media screen and ( min-width: 840px )
 *
 * ----- Layout
 * CSS Gridによる枠組みを指定。
 * ----- Font
 * フォントの指定。
 * ----- Design
 * グラフィックや細部パーツのレイアウトに関する指定。
 * --- Animation
 * 画面挙動やアニメーションに関する指定。
 */

/* --- check_Layout --- */
/* header { background-color: rgb(175, 150, 130); } */
/* header #baseinfo { background-color: #900; } */
/* header h1 { background-color: rgb(219, 194, 176); } */
/* header nav#sns { background-color: rgb(240, 220, 212); } */
header nav#global { background-color: rgb(217, 240, 212); }
header nav#topicpath { background-color: rgb(214, 218, 180); }
/* main    { background-color: #fff; } */
article {
    /* border: 1px solid #fff; */
    /* background-color: #efefe0; */
}
footer  { background-color: #027a83; }

/* -------------------- Setting Section -------------------- */
/* ===== CSS Variables ===== */
:root {
    /* Layout */
    --header-height-sp: 50px;
    --header-height-pc: 80px;
    /* Color */
    --readcopy-font-color: #f4f3f1;
    --borderline-color: #bbb;
    --base-background-color: #f4f3f1;
    /* Margin */
    --base-margin: 30px;
    /* Theme Color */
    /* --themecolor-ci-base:  #fdd000; */
}


/* ===== Link Color ===== */
a { text-decoration: underline; }
a:link {    /* 未訪問 */
  color: #fdd000;
}
a:visited { /* 訪問済 */
  color: #fdd000;
}
a:hover {   /* マウスオーバ */
  color: #fdd000;
}
a:active {  /* アクティブ */
  color: #f00;
}

/* ===== Animation ===== */
/* 滑らかなスクロール : smooth *通常はauto */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 20px;
}
/* for PC */
@media screen and ( min-width: 840px ) {
    /* Scale Up */
    .scale_up {
        transition-duration: .4s;
    }
    .scale_up:hover {
        transform: scale(1.2);
    }
    /* Rotate Y */
    .rot_y:hover {
        transition: transform 2s;
        transform: rotateY(360deg);
    }
    a.bright:hover {
        filter: brightness(1.1);
    }
}



/* -------------------- Layout -------------------- */
/* ===== Base Grid Layout ===== */
#wrap {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 0 3px;
    gap: 0 3px;
    grid-template-columns: repeat(12, 1fr);
}
header,
main,
footer {
    grid-column: 1 / 13;
    display: grid;
    grid-auto-flow: row;
    grid-gap: 0 3px;
    gap: 0 3px;
    grid-template-columns: repeat(12, 1fr);
}
main {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 0 3px;
    gap: 0 3px;
    grid-template-columns: repeat(12, 1fr);
}
article {
    grid-column: 1 / 13;
}
/* for PC */
@media screen and ( min-width: 840px ) {
    #wrap {
        grid-gap: 0 30px;
        gap: 0 30px;
    }
    header {
        grid-column: 2 / 12;
        /* grid-column: 1 / 13; */
    }
    main {
        grid-gap: 0 30px;
        gap: 0 30px;
    }
    article {
        grid-column: 1 / 13;
    }
    footer {
        grid-gap: 0 30px;
        gap: 0 30px;
    }
}



footer {
    padding: 30px 0.8em 120px;
}
div#copyright {
    grid-column: 1 / 13;
    text-align: center;
}
div#copyright a {
    display: block;
    width: 250px;
    margin: 0 auto;
}

/* for PC */
@media screen and ( min-width: 840px ) {
    div#copyright {
        grid-column: 2 / 12;
    }
}


/* ===== header Grid Layout ===== */
header {
    display: grid;
    grid-gap: 0px 0px;
    grid-template-rows: var(--header-height-sp);
    grid-template-columns: 100%;
}
header #baseinfo {
    display: grid;
    grid-gap: 0px 0px;
    grid-template-columns: auto 120px;
    grid-template-rows: var(--header-height-sp);
}

/* for PC */
@media screen and ( min-width: 840px ) {
    header {
        grid-template-rows: var(--header-height-pc);
    }
    header #baseinfo {
        grid-template-columns: auto 160px;
        grid-template-rows: var(--header-height-pc) auto;
    }
}
/*

    grid-template-columns: 160px auto;
    grid-template-rows: 50px;
*/


/* -------------------- Font -------------------- */
/* ===== Base Font ===== */
html {
    font-size: 62.5%;
}
body {
    font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
    /*font-family: 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;*/
    font-size: 1.8rem; /* 18px */
    line-height: 2.0;
    line-break: strict;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100% !important;
    text-rendering: optimizeSpeed;
    color: var(--readcopy-font-color);
}
/* for PC */
@media screen and ( min-width: 840px ) {
    body {
        font-feature-settings: "palt";
        letter-spacing: 0.08rem;
        font-family: 'Noto Sans JP',
                    -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
                    '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic',
                    'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN',
                    Arial, 'メイリオ', Meiryo, sans-serif;
    /*        font-family: 'Noto Serif JP',
                    '游明朝', YuMincho, '游明朝 Medium', 'Yu Mincho Medium',
                    'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN',
                    'Palatino Linotype', 'HGS明朝E', 'メイリオ', Meiryo, serif;*/
        font-size: 2.1rem; /* 21px */
        line-height: 2.0;
        font-weight: 500;
    }
}

/* ===== Google Fonts - Material Symbols ===== */
.material-symbols-outlined {
    font-size: 3.6rem;
    vertical-align: middle;
}

/* ===== Heading Font ===== */
/*
 * IE8以下とAndroid4.3以下用フォールバック と 可変フォントサイズを指定
 * 可変しきい値 = (最大小との差の1/10) / 0.559988800223996
 */
h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    line-height: 1.2;
}
h1 {
    font-size: 36px;
    font-size: calc( 2.8rem + ( (1vw - 0.64rem) * (0.8 / 0.56) ) ); /* 28~36px */
}
h2 {
    font-size: 32px;
    font-size: calc( 2.6rem + ( (1vw - 0.64rem) * (0.6 / 0.56) ) ); /* 26~32px */
}
h3 {
    font-size: 28px;
    font-size: calc( 2.4rem + ( (1vw - 0.64rem) * (0.4 / 0.56) ) ); /* 24~28px */
}
h4,h5,h6 {
    font-size: 24px;
    font-size: calc( 2.1rem + ( (1vw - 0.64rem) * (0.3 / 0.56) ) ); /* 21~24px */
}
/* for PC */
@media screen and ( min-width: 840px ) {
    h1 { font-size: 3.6rem; }
    h2 { font-size: 3.2rem; }
    h3 { font-size: 2.8rem; }
    h4,h5,h6 { font-size: 2.4rem; }
}

/* ===== Heading Margin ===== */
header h1 { margin: 0;}
h1        { margin: 50px 0 20px; }
h2        { margin: 120px 0 25px; }
h3        { margin: 60px 0 18px; }
h4,h5,h6  { margin: 35px 0 10px; }

/* ===== Global Navigation Layout ===== */
header {
    z-index: 10000;
    position: sticky;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: contrast(3) blur(15px);
    -webkit-backdrop-filter: contrast(3) blur(15px);
}
/* for PC */
@media screen and ( min-width: 840px ) {
    header {
        position: relative;
        backdrop-filter: none;
        background-color: transparent;
        -webkit-backdrop-filter: none;
    }
}



/* ===== SNS Link ===== */
nav#sns ul {
    display: flex;
    height: var(--header-height-sp);
    gap: 5px;
    justify-content: end;
    align-items: center;
}
nav#sns ul li {
    flex-basis: 40px;
}
nav#sns ul li:last-child {
    margin-right: 5px;
}
nav#sns ul li a {
    display: block;
    padding: 8px;
    border-radius: 50%; 
    border: 2px #fff solid;
    background-color: rgba(0,0,0,0.8);
}
/* for PC */
@media screen and ( min-width: 840px ) {
    nav#sns ul {
        height: var(--header-height-pc);
        justify-content: end;
    }
    nav#sns ul li:last-child {
        margin-right: 10px;
    }
}

/* -------------------- Design -------------------- */
body {
    background-image: url(img/back_landing.webp);
    background-size: cover;
    background-attachment: fixed;
    background-position: 50% 0;
}

header h1 {
    padding: 5px;
}
header h1 img {
    margin: 0 -8px 0 0;
    display: inline;
    height: calc( var(--header-height-sp) - 10px );
    vertical-align: top;
}
/* for PC */
@media screen and ( min-width: 840px ) {
    header h1 {
        padding: 10px 0 10px;
    }
    header h1 img {
        height: calc( var(--header-height-pc) - 20px );
    }
}



/* --- ScrollBar Design ---
@media screen and ( min-width: 840px ) {
    ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #fff;
        border: none;
        border-radius: 10px;
        box-shadow: inset 0 0 2px #777;
    }
    ::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
        box-shadow: none;
    }
}*/